【JavaScript】- createEvent() 创建自定义事件

document.createEvent 用于创建事件，在DOM Level 2　的事件中就有HTMLEvents，MouseEvents，UIEvents 事件类型。DOM Level 3增加很多事件类型。

语法：

createEvent(eventType)

参数	描述
eventType	想获取的 Event 对象的事件模块名。 关于有效的事件类型列表，请参阅”说明”部分。

返回值

返回新创建的 Event 对象，具有指定的类型。

说明

该方法将创建一种新的事件类型，该类型由参数 eventType 指定。注意，该参数的值不是要创建的事件接口的名称，而是定义那个接口的 DOM 模块的名称。

下表列出了 eventType 的合法值和每个值创建的事件接口：

参数	事件接口	初始化方法
HTMLEvents	HTMLEvent	iniEvent()
MouseEvents	MouseEvent	iniMouseEvent()
UIEvents	UIEvent	iniUIEvent()

用该方法创建了 Event 对象以后，必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息，请参阅 Event 对象参考。

该方法实际上不是由 Document 接口定义的，而是由 DocumentEvent 接口定义的。如果一个实现支持 Event 模块，那么 Document 对象就会实现 DocumentEvent 接口并支持该方法。

为DOM元素创建自定义事件的步骤为：

一、创建事件： let event = document.createEvent('HTMLEvents');

二、初始化事件：

          // initEvent接受3个参数：

          // 事件类型，是否冒泡，是否阻止浏览器的默认行为

          event.initEvent("mouseenter", true, true);

三、为DOM添加事件监听： lis[index].addEventListener('自定义事件名称',function(){})

四、分发(触发)自定义事件：

          //触发绑定事件句柄的DOM元素上的事件，如mouseenter,mouseleave事件等

          lis[index].dispatchEvent(event);

 let event = document.createEvent('HTMLEvents');

event.initEvent("mouseenter", true, true);
     // initEvent接受3个参数：
     // 事件类型，是否冒泡，是否阻止浏览器的默认行为

lis[index].dispatchEvent(event);
     //触发lis[index]上绑定的mouseenter事件