自定義事件的觸發dispatchEvent

自定義事件的觸發dispatchEvent

12018.08.28 11:46:32字數 746閱讀 15442

1、element.dispatchEvent()

對於標準瀏覽器，其提供了可供元素觸發自定義事件的方法：element.dispatchEvent().。
不過，在使用該方法以前，咱們還須要作其餘兩件事，即建立和初始化。

document.createEvent() event.initEvent() element.dispatchEvent() 舉個例子： var dom = document.querySelector('#id') document.addEventListener('alert', function (event) { console.log(event) }, false); // 建立 var evt = document.createEvent("HTMLEvents"); // 初始化 evt.initEvent("alert", false, false); // 觸發, 即彈出文字 dom.dispatchEvent(evt); 

一、createEvent()

createEvent()方法返回新建立的Event對象，支持一個參數，表示事件類型，具體見下表：

參數	事件接口	初始化方法
HTMLEvents	HTMLEvent	initEvent()
MouseEvents	MouseEvent	initMouseEvent()
UIEvents	UIEvent	initUIEvent()

二、initEvent()

initEvent()方法用於初始化經過DocumentEvent接口建立的Event的值。

支持三個參數：initEvent(eventName, canBubble, preventDefault)
分別表示：

• 事件名稱
• 是否能夠冒泡
• 是否阻止事件的默認操做

三、dispatchEvent()

dispatchEvent()就是觸發執行了，dom.dispatchEvent(eventObject)
參數eventObject表示事件對象，是createEvent()方法返回的建立的Event對象。

2、自定義事件

一、Event

自定義事件的函數有 Event、CustomEvent 和 dispatchEvent

// 向 window派發一個resize內置事件 window.dispatchEvent(new Event('resize')) // 直接自定義事件，使用 Event 構造函數： var event = new Event('build'); var elem = document.querySelector('#id') // 監聽事件 elem.addEventListener('build', function (e) { ... }, false); // 觸發事件. elem.dispatchEvent(event); 

二、CustomEvent

CustomEvent 能夠建立一個更高度自定義事件，還能夠附帶一些數據，具體用法以下：

var myEvent = new CustomEvent(eventname, options); 其中 options 能夠是： { detail: { ... }, bubbles: true, //是否冒泡 cancelable: false //是否取消默認事件 } 

其中 detail 能夠存放一些初始化的信息，能夠在觸發的時候調用。其餘屬性就是定義該事件是否具備冒泡等等功能。

內置的事件會由瀏覽器根據某些操做進行觸發，自定義的事件就須要人工觸發。
dispatchEvent 函數就是用來觸發某個事件：

element.dispatchEvent(customEvent); 

上面代碼表示，在 element 上面觸發 customEvent 這個事件。
結合起來用就是：

// add an appropriate event listener obj.addEventListener("cat", function(e) { process(e.detail) }); // create and dispatch the event var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}}); obj.dispatchEvent(event); 使用自定義事件須要注意兼容性問題，而使用 jQuery 就簡單多了： // 綁定自定義事件 $(element).on('myCustomEvent', function(){}); // 觸發事件 $(element).trigger('myCustomEvent'); // 此外，你還能夠在觸發自定義事件時傳遞更多參數信息： $( "p" ).on( "myCustomEvent", function( event, myName ) { $( this ).text( myName + ", hi there!" ); }); $( "button" ).click(function () { $( "p" ).trigger( "myCustomEvent", [ "John" ] ); }); 

三、IE瀏覽器

因爲向下不少版本的瀏覽器都不支持document.createEvent()方法，所以咱們須要另闢蹊徑（聽說IE有document.createEventObject()和event.fireEvent()方法，可是不支持自定義事件~~）。
IE瀏覽器有很多自給自足的東西，例以下面要說的這個"propertychange"事件，顧名思意，就是屬性改變即觸發的事件。
例如文本框value值改變，或是元素id改變，或是綁定的事件改變等等。

dom.evtAlert = "2012-04-01"; <br>dom.attachEvent("onpropertychange", function(e) { if (e.propertyName == "evtAlert") { fn.call(this); } }); 

這個，當咱們須要觸發自定義事件的時候，只要修改DOM上自定義的evtAlert屬性的值便可：

dom.evtAlert = Math.random().toString(36).substr(2) 

此時就會觸發dom上綁定的onpropertychange事件，又由於修改的屬性名正好是"evtAlert", 因而自定義的fn就會被執行。這就是IE瀏覽器下事件觸發實現的完整機制，應該說講得仍是蠻細的。

3、自定義事件的刪除

與觸發事件不一樣，事件刪除，各個瀏覽器都提供了對應的事件刪除方法，如removeEventListener和detachEvent。
不過呢，對於IE瀏覽器，還要多刪除一個事件，就是爲了實現觸發功能額外增長的onpropertychange事件：

dom.detachEvent("onpropertychange", evt); var fireEvent = function(element,event){ if (document.createEventObject){ // IE瀏覽器支持fireEvent方法 var evt = document.createEventObject(); return element.fireEvent('on'+event,evt) } else{ // 其餘標準瀏覽器使用dispatchEvent方法 var evt = document.createEvent( 'HTMLEvents' ); evt.initEvent(event, true, true); return !element.dispatchEvent(evt); } };