(轉)js原生自定義事件的觸發dispatchEvent

時間 2019-12-13

標籤原生自定義事件觸發 dispatchevent 欄目 JavaScript 简体版

原文原文鏈接

1. 對於標準瀏覽器，其提供了可供元素觸發的方法：element.dispatchEvent(). 不過，在使用該方法以前，咱們還須要作其餘兩件事，及建立和初始化。所以，總結說來就是：javascript

 
         document.createEvent() 
        
         event.initEvent() 
        
         element.dispatchEvent()

舉個例子：java

 
         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()方法返回新建立的Event對象，支持一個參數，表示事件類型，具體見下表：瀏覽器

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

initEvent()方法用於初始化經過DocumentEvent接口建立的Event的值。
支持三個參數：initEvent(eventName, canBubble, preventDefault).
分別表示：事件名稱，是否能夠冒泡，是否阻止事件的默認操做app

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

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

 
         //向window派發一個resize內置事件 
        
         window.dispatchEvent( 
         new  
         Event( 
         'resize' 
         ))

直接自定義事件，使用 Event 構造函數：函數

 
         var  
         event =  
         new  
         Event( 
         'build' 
         ); 
        
         var  
         elem = document.querySelector( 
         '#id' 
         ) 
        
         // Listen for the event. 
        
         elem.addEventListener( 
         'build' 
         ,  
         function  
         (e) { ... },  
         false 
         ); 
        
         // Dispatch the event. 
        
         elem.dispatchEvent(event);

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

 
         var  
         myEvent =  
         new  
         CustomEvent(eventname, options);

其中 options 能夠是：this

 
         { 
        
         detail: { 
        
         ... 
        
         }, 
        
         bubbles:  
         true 
         ,     
         //是否冒泡 
        
         cancelable:  
         false  
         //是否取消默認事件 
        
         }

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

內置的事件會由瀏覽器根據某些操做進行觸發，自定義的事件就須要人工觸發。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"  
         ] ); 
        
         });

2. 對於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瀏覽器下事件觸發實現的完整機制，應該說講得仍是蠻細的。

自定義事件的刪除
與觸發事件不一樣，事件刪除，各個瀏覽器都提供了對於的時間刪除方法，如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);  
        
         }  
        
         };