dtcms 源码 Ubuntu Zookeeper安装 远程桌面登陆 循环 inheritance svg gwt static 后台界面模板 网赚视频教程 webpack视频 js获取焦点事件 linux源码在线阅读 iot系统 小程序下拉刷新样式 python入门 python界面 python循环语句 python抛出异常 python命令行参数 python返回函数 java文件写入 java获取月份 java替换字符 java中continue java语言是什么 java版本查看 网站后台模板 迷宫解锁 机械下载 1660ti cubase下载 php取整 解压tar 抠图软件免费版 小程序游戏源码 cdr字体变形 勇敢者的游戏3 dnf胜利的证明有什么用
当前位置: 首页 > 学习教程  > 

JavaScript原生自动触发事件

2020/10/16 18:03:50 文章标签: js原生点击事件

在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟&…

 在有些情况下,我们需要程序逻辑自动触发元素的事件,例如js提供了click(), form提供了reset(),submit()等方法!在jquery中提供了trigger()方法帮助我们自动触发事件,原理是什么呢?接下来让我们一探究竟!

一、eventType

eventType共有5种类型:

  • HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'.

  • UIEevents :包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.

  • MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.

  • MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved','DOMCharacterDataModified','DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.

上述加粗的是经常会用到的事件类型

二、createEvent(eventType)

eventType=MouseEvents,触发事件为click为例:

document.body.onclick=function(){
    alert("hello")
}
var event = document.createEvent('MouseEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("click", false, true);
//触发document上绑定的click事件
document.body.dispatchEvent(event);

通过el.dispatchEvent触发事件,聪明的你有没有想到vue里的$emit?

三、自定义事件

document.body.addEventListener("veb",function(e){
         alert(e.eventType)
})
var event = document.createEvent('HTMLEvents');
// initEvent接受3个参数:
// 事件类型,是否冒泡,是否阻止浏览器的默认行为
event.initEvent("veb", false, true);
//通过eventType传递事件信息
event.eventType="I love Veblen"
//触发document上绑定的click事件
document.body.dispatchEvent(event);

 示例

/*<input id="buttonid" type="button" value="按钮" onclick="alert('这是自动点击弹窗')" />*/

		<script type="text/javascript">
			setInterval(function() {
				if (document.all) {
					document.getElementById("buttonid").click();
				} else {
					var e = document.createEvent("MouseEvents");
					e.initEvent("click", true, true);
					document.getElementById("buttonid").dispatchEvent(e);
				}
			}, 2000);
		</script>

 


本文链接: http://www.dtmao.cc/news_show_300357.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?