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>