原生js之document.createEvent建立自定义事件

Posted 2020-11-27 问海螺吧

document.createEvent用于创建事件，

在DOM Level 2　的事件中就有htmlEvents，MouseEvents，UIEvents事件类型。DOM Level 3增加很多事件类型，个人觉得其中最有用的是CustomEvent自定义事件。

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

一、创建事件：var ev = document.createEvent(‘CustomEvent‘);

二、初始化事件：ev.initCustomEvent(‘自定义事件名称‘, false(是否允许冒泡), false(是否允许中断),args)

三、为DOM添加事件监听：element.addEventListener(‘自定义事件名称‘,fn,false)

四、分发(触发)自定义事件：element.dispatchEvent(ev)

 

<script>
 var comment = document.getElementsByTagName(‘a‘)[0];
 
if (document.all) {
 // For IE

 comment.click();

} else if (document.createEvent) {
   //FOR DOM2
var ev = document.createEvent(‘HTMLEvents‘);

 ev.initEvent(‘click‘, false, true);
 comment.dispatchEvent(ev);
}
</script>

   

语法：

createEvent(eventType)

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

返回值

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

抛出

如果实现支持需要的事件类型，该方法将抛出代码为 NOT_SUPPORTED_ERR 的 DOMException 异常。

说明

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

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

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

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

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