自定義事件——Event和CustomEvent

 

　　以前在學習自定義事件時，在MDN的Event.initEvent()頁面頂端有寫：該特性已從Web標準中刪除，雖然一些瀏覽器目前仍然支持它，但也許會在將來的某個時間中止支持，請儘可能不要使用該特性。

　　做爲替代，咱們能夠經過建立Event對象和CustomEvent對象來建立自定義對象。先從Event()對象開始。

　　

Event()——Event對象的構造函數

　　

　　我們能夠看着下面這個例子去了解如何使用Event()建立一個自定義對象：

 1 <script type="text/javascript">  
 2     /* 建立一個事件對象，名字爲newEvent，類型爲build */
 3     var newEvent = new Event('build', { bubbles:true,cancelable:true,composed:true });
 4         
 5     /* 給這個事件對象建立一個屬性並賦值 */
 6     newEvent.name = "新的事件！";
 7     
 8     /* 將自定義事件綁定在document對象上，這裏綁定的事件要和咱們建立的事件類型相同，否則沒法觸發 */
 9     document.addEventListener("build",function(){
10         alert("你觸發了自定義事件！" + newEvent.name);
11     },false)
12         
13     /* 觸發自定義事件 */
14     document.dispatchEvent(newEvent);  
15 </script>    

　　啓動文檔的時候由於"document.dispatchEvent(newEvent)"的關係，會先觸發一次事件：

　　

　　以後你每執行一次"document.dispatchEvent(newEvent)"都會觸發這個事件：

　　

　　好，接下來咱們看看Event()這個方法的語法把（disapthEvent()在個人另外一個筆記裏有介紹，這裏就再也不次介紹了）：

　　event = new Event(typeArg, eventInit);

　　typeArg：指定事件類型，傳遞一個字符串。這裏的事件類型指的是像點擊事件（click）、提交事件（submit）、加載事件（load）等等。

　　eventInit：可選，傳遞EventInit類型的字典。實際上這個EventInit類型的字典也就是咱們使用InitEvent()時須要傳遞的參數，以鍵值對的形式傳遞，不過它能夠多選一個參數：

　　　　bubbles：事件是否支持冒泡，傳遞一個boolean類型的參數，默認值爲false。

　　　　cancelable：是否可取消事件的默認行爲，傳遞一個boolean類型的參數，默認值爲false。

　　　　composed：事件是否會觸發shadow DOM（陰影DOM）根節點以外的事件監聽器，傳遞一個boolean類型的參數，默認值爲false。（關於shadow DOM能夠去看ChokCoco前輩的這篇文章，這裏就不詳說了，可能我會根據本身的理解也寫一個關於shadow DOM的筆記）這個參數是InitEvent()中沒有的新參數。

　　

　　用法其實和使用createEvent()結合initEvent()差很少，不過Event()不支持IE瀏覽器，因此怎麼使用仍是得看我們。

　　

CustomEvent()——CustomEvent對象的構造函數

 

　　CustomEvent()能夠像Event()那樣賦值，但它能夠在Web Workers中使用（與主線程分離的另外一個線程），能夠傳遞跟事件關聯的相關值（detail）。（但我賊Event()中沒看到又說可不可使用Web Workers，寫完這個去查查）

　　咱們先經過下面的例子瞭解一下如何使用CustomEvent()去建立一個事件對象（這裏先不使用事件相關值detail）：

 1 <script type="text/javascript">  
 2     /* 建立一個事件對象，名字爲newEvent，類型爲build */
 3     var newEvent = new CustomEvent('build', { bubbles:true,cancelable:true,composed:true });
 4     
 5     /* 給這個事件對象建立一個屬性並賦值，這裏綁定的事件要和咱們建立的事件類型相同，否則沒法觸發 */
 6     newEvent.name = "新的事件！";
 7     
 8     /* 將自定義事件綁定在document對象上 */
 9     document.addEventListener("build",function(){
10         alert("你觸發了使用CustomEvent建立的自定義事件！" + newEvent.name);
11     },false)
12         
13     /* 觸發自定義事件 */
14     document.dispatchEvent(newEvent);  
15 </script>  

　　啓動文檔的時候由於"document.dispatchEvent(newEvent)"的關係，會先觸發一次事件：

 

　　以後你每執行一次"document.dispatchEvent(newEvent)"都會觸發這個事件：

　　

　　而後咱們來看CustomEvent()的語法：

　　event = new CustomEvent(typeArg, customEventInit);

　　typeArg：指定事件類型，傳遞一個字符串。這裏的事件類型指的是像點擊事件（click）、提交事件（submit）、加載事件（load）等等。

　　customEventInit：可選。傳遞一個CustomEventInit字典。實際上這個字典就是咱們使用initCustomEvent()時須要的參數，這個參數就是事件相關值（detail）：

　　　　detail：可選，默認值爲null，類型爲any（也就是說能夠傳遞任意類型的參數）。這個值就是和事件相關聯的值。

　　在展現使用detail做爲第二個參數的例子前，要先注意一件事：CustomEventInit字典也能夠接受EventInit字典的參數，就像一開始的例子同樣，我傳遞了EventInit字典的bubbles、cancelable、composed。

　　下面將展現使用detail參數的例子，使用到detail的部分我會加粗處理（爲了看着方便，這回就不傳遞EventInit字典中的參數了）：

 1 <script type="text/javascript">  
 2     /* 建立一個事件對象，名字爲newEvent，類型爲build */
 3     var newEvent = new CustomEvent('build',{  4  detail: {  5  dog:"wo",cat:"mio"
 6  }  7     });
 8     
 9     /* 將自定義事件綁定在document對象上 */
10     document.addEventListener("build",function(){
11         alert(" event.detail.dog:" + event.detail.dog 12          + "\n event.detail.cat:" + event.detail.cat );
13     },false)
14     
15     /* 觸發自定義事件 */
16     document.dispatchEvent(newEvent);  
17 </script>  

　　啓動文檔的時候由於"document.dispatchEvent(newEvent)"的關係，會先觸發一次事件：

　　

　　以後你每執行一次"document.dispatchEvent(newEvent)"都會觸發這個事件：

　　

　　

---

參考資料：

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

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

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

MDN - CustomEvent.initCustomEvent()：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent

MDN - CustomEvent.detail：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/detail