JavaScript原生自动触发事件

66 阅读 0 评论 44 点赞

我是靠谱客的博主鲤鱼鸵鸟，最近开发中收集的这篇文章主要介绍JavaScript原生自动触发事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在有些情况下，我们需要程序逻辑自动触发元素的事件，例如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>