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事件