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

Posted 问海螺吧

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js之document.createEvent建立自定义事件相关的知识,希望对你有一定的参考价值。

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 接口并支持该方法。

以上是关于原生js之document.createEvent建立自定义事件的主要内容,如果未能解决你的问题,请参考以下文章

js 自定义事件 document.createEvent

Document.createEvent与new Event区别

js事件Event对象(自定义事件对象 CustomEvent)

js事件Event对象(自定义事件对象 CustomEvent)

自定义事件 js

JavaScript自定义事件 - createEvent()initEvent()和dispachEvent()