本文共 1327 字，大约阅读时间需要 4 分钟。

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

 示例

/**/		

转载地址：https://jackiehao.blog.csdn.net/article/details/106046808 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！