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

 

　　在學習目標事件的方法的時候，接觸到了dispatchEvent()方法。度娘查一查，這是一個事件觸發器，事件觸發器其實就是觸發事件的東西。

　　一般狀況下，咱們觸發事件都是在交互中觸發的事件，例如點擊按鈕（click）、提交表單（submit）等。可是有的狀況下，事件觸發只能由程序來完成，例如ajax框架的一些自定義事件。

　　基本上dispatchEvent()方法用於觸發自定義事件，自定義事件使用createEvent()建立事件對象，使用initEvent()初始化事件對象。

　　讓咱們照着我寫的一個例子去了解一下自定義事件用到的這三個方法吧：

 1 <script type="text/javascript">      
 2     /* 建立一個事件對象，名字爲newEvent，類型爲HTMLEvent */
 3     var newEvent = document.createEvent("HTMLEvents");
 4 
 5     /* 
 6      * 實例化建立好的事件對象
 7      * 第一個參數：事件類型（就好像是click仍是submit）
 8      * 第二個參數：是否冒泡
 9      * 第三個參數：是否阻止瀏覽器默認行爲（例如阻止submit事件提交表單）
10      */
11     newEvent.initEvent("myEvent",true,true);
12         
13     /* 給自定義事件對象的屬性賦值。這個屬性一開始不存在，咱們這裏將其實例化了 */
14     newEvent.name = "THis is Name";
15         
16     /* 
17      * 將自定義事件綁定在document上，你也能夠綁定到指定元素上。
18      * 這裏要注意：第一個參數要和上面initEvent()的第一個參數一致，不然沒法觸發這個事件以及獲取newEvent中的一些屬性（好比這裏的newEvent.name）。
19      */
20     document.addEventListener("myEvent",function() {
21         alert("自定義事件的name屬性：" + newEvent.name);
22     },false);
23 
24     /* 觸發自定義事件 */
25     document.dispatchEvent(newEvent);  
26 </script>    

　　這個時候啓動文檔的時候由於 "document.dispatchEvent(newEvent);" 的緣由，會觸發一次事件：

　　

　　以後只要咱們在控制檯中輸入document.dispatchEvent(newEvent)都會觸發這個函數，而且返回true（你也能夠寫個函數，裏面有這條代碼，而後觸發啥事件就觸發自定義事件）：

　　

　　下面咱們一個個介紹這三個方法。

 

createEvent()——建立自定義對象

　　

　　該方法建立一個指定類型的事件，返回的對象必須先初始化（好比使用initEvent()）後才能夠使用dispachEvent()去觸發。

　　var eventObject = careateEvent(type);

　　type：建立事件對象的類型，能夠建立"UIEvents"（UI事件，用於觸摸屏設備）、"MouseEvents"（鼠標事件）、"MutationEvents"（DOM結構發生改變觸發的事件）、"HTMLEvents"（HTML事件？機翻英文文檔看不懂。。。），在這裏得知之前還能夠指定類型爲"Event"。

 

initEvent()——初始化自定義事件對象

 

　　initEvent()用於初始化自定義事件，但據MDN所說，已從Web標準中刪除，可能在將來會刪除這個方法。

　　那之後我想要自定義事件怎麼辦呢？在MDN中有提到另外一種方法，這裏就不介紹了，晚些時候再另寫一篇介紹另外一種方式也就是DOM L4事件構造函數（名字我也是看到這篇文章才知道的）

　　那咱先來看看這個將來會刪除的這個方法的語法吧：

　　event.initEvent(type, bubbles, cancalable);

　　type：初始化事件對象的類型，傳遞一個字符串類型的參數。這裏的事件類型指的是相似點擊事件（click）、加載事件（load）、提交事件（submit）等等這種類型，固然你也能夠自定義一個名字，這樣用戶就不能經過交互去觸發這個事件了。若是你這裏設置的是"click"，初始化後你也能夠經過點擊去觸發這個事件。

　　　　　在綁定事件的時候要注意：綁定事件的事件類型（addEventListener()的第一個參數）要和這個事件類型一致，否則沒法觸發事件。

　　bubbles：該事件是否會冒泡，傳遞一個布爾型的參數。設置爲true表示該事件支持冒泡，爲false表示不支持冒泡。設置該參數會影響到Event.bubbles（事件是否支持冒泡）的值。

　　cancalable：該事件的默認動做是否能夠取消，傳遞一個布爾型的參數。設置爲true表示能夠取消默認動做，爲false表示不能夠取消默認動做。設置該參數會影響到Event.cancalable（是否能夠取消默認行爲）的值。

 

dispachEvent()——觸發自定義事件

 

　　initEvent()用於觸發自定義事件，也就是自定義事件觸發器。若是你initEvent()的type參數傳遞的是你本身定義的事件類型，沒法經過用戶交互觸發，那麼就就能夠使用這個方法觸發。

　　dispacheEvent()的語法以下（我改了一下，不是MDN上寫的那樣，改後的版本適合我本身理解）：

　　target.dispachEvent(event);

　　target：綁定自定義事件的對象，好比我把這個事件經過addEventListener()綁定在一個<p>元素上，那麼target就指向這個<p>元素。

　　event：要觸發的事件對象，這裏就是咱們本身建立的事件對象了。例如咱們這樣建立自定義對象："var myEvent = createrEvent('Event');"，那麼這裏就寫myEvent。

　　注意：dispachEvent()會返回一個Boolean（布爾）值，若是這個這個事件綁定的函數中有Event.preventDefault()返回false（MDN中說Event.cancalable要爲false才行，但是我測試爲true的時候有preventDefault()會返回false，Event.cancalable爲false有沒有preventDefault()都會返回true）。其它狀況返回true。

 

　　至於自定義事件的用途嘛。。。我看你們都說在AJAX中可能會用到自定義事件，但我在寫這篇筆記的時候（2019-02-15）還沒開始學習AJAX，也不知道在AJAX中如何使用，先這樣啦，等看完這部份內容再去看AJAX的教程啦。

 

---

參考資料：

MDN - Document.createEvent()：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

MDN - Event.initEvent()：https://developer.mozilla.org/zh-CN/docs/Web/API/Event/initEvent

MDN - 建立和觸發events：https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

MDN - EventTarget.dispachEvent()：https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent

簡書 - 建立事件（new Event） - 做者：Hushaby、：https://www.jianshu.com/p/47c84ebf0d26