原生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 接口並支持該方法。