自定義事件的觸發 dispatchEvent 的用法

window.addEventListener && window.dispatchEvent

一、標準瀏覽器提供了可供元素觸發的方法：element.dispatchEvent()，在使用之前，需要創建和初始化，下面是具體的用法：

vue中舉例：

1.通過 var event = document.createEvent("HTMLEvents"); 這個方法創建一個event對象實例

2.通過 event.initEvent("aaa", true, true); 初始化一個aaa事件，// 3個參數：事件類型，是否冒泡，是否阻止瀏覽器的默認行爲

注意： /*屬性，可以隨便自己定義*/

event.name = 'hello, 我是小禮';  
event.message = '我今年18歲';  

3.然後通過 window.dispatchEvent(event); 方法觸發自定義事件aaa

this.$nextTick(tick => {
     var event = document.createEvent("HTMLEvents");
     event.initEvent("aaa", true, true);
     window.dispatchEvent(event);
})

4.最後在需要監聽這個事件的頁面，通過window.addEventListener('aaa', function(){});即可監聽到事件的執行

window.addEventListener('aaa', function (event) {  
    console.log(event.name+'，'+event.message);
}, false);

//控制檯就可以打印出監聽的結果： hello, 我是小禮，我今年18歲

dispatchEvent大概就是這三步

 

下面再看看一段代碼，非IE主流瀏覽器及IE下的事件觸發器

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);  
      }  
};

document.creatEventObject()是IE創建event對象實例的方法，和document.creatEvent('HTMLEvents')在非IE主流瀏覽器下的作用相同，fireEvent是IE下的事件觸發器，與dispatchEvent在非IE主流瀏覽器下作用相同。

 

交流
可添加qq羣共同進階學習： 進軍全棧工程師疑難解  羣號:   856402057

我是老禮，公衆號「進軍全棧攻城獅」作者 ，對前端技術保持學習愛好者。我會經常分享自己所學所看的乾貨，在進階的路上，共勉！