自定義事件

前言

　　除了瀏覽器提供的原生事件外，有時我們還需要自定義事件以滿足特定的需求，比如小模塊之間的通信，傳遞信息等。JavaScript提供了幾種自定義事件的方式：

　　　　1. Event() 構造函數, 創建一個新的事件對象 Event

　　　　2. CustomEvent()  創建一個自定義事件

　　　　3. document.createEvent() 創建一個新的事件（Event），隨之必須調用自身的 init 方法進行初始化。

Event()

　　語法 ： event = new Event(typeArg, eventInit) 

　　typeArg是一個表示事件類型的字元串。

　　eventInit是事件的配置項：

　　　　"bubbles"，可選，Boolean類型，預設值為 false，表示該事件是否冒泡。

　　　　"cancelable"，可選，Boolean類型，預設值為 false， 表示該事件能否被取消。

　　　　"composed"，可選，Boolean類型，預設值為 false，指示事件是否會在陰影根之外

　　自定義事件的監聽和原生事件一樣；觸發的時候通過 targetDom.dispatchEvent(event)觸發，看下麵的慄子

//用來觸發自定義事件
<button type="button" name="button" class="test">點我</button>

var button = document.querySelector('button');

var selfEvent = new Event('self',{
      "bubbles" : true,
      "cancelable" : false,
      "composed" : false
    });


    //監聽
    document.addEventListener('self',function(e){
      alert('事件順利觸發啦！')
    })

    //觸發
    button.addEventListener('click',function(){
      document.dispatchEvent(selfEvent) //觸發自定義事件
    })

　　需要註意的是，IE不支持該方法。

　　如果自定義事件的時候，需要傳遞一些額外的欄位，這個時候就可以用CustomEvent()

CustomEvent()

　　和Event()方法類似，不過在創建的時候，CustomEventInit中多了一個detail欄位，可以用來傳遞額外的對象，而且少了composed欄位。

        觸發和監聽都和Event()類似，而且同樣不支持IE

    //IE不支持  可攜帶數據
    var custom = new CustomEvent('custom',{
      "detail" : {  //可攜帶額外的數據
        age : 18
      },
      "bubbles" : true,
      "cancelable" : false,
    });

    //監聽
    document.addEventListener('custom',function(e){
      console.log(e);
    })

    //觸發
    button.addEventListener('click',function(){
      document.dispatchEvent(custom)
    })

　　那麼如果想要相容IE的話，要怎麼辦呢？

document.createEvent()

　　這種方式已經被官方聲明不推薦使用了。但是瀏覽器都是支持的，IE也都支持

　　document.createEvent('Event') 創建一個自定義事件之後，在觸發事件之前一定需要進行初始化。而且要註意只能是document創建，不過使用的時候，所有元素都可以，和之前兩種方式一樣。

　　初始化事件的時候指定事件名及能否冒泡，能否被阻止等。

    //只能是document創建  事件被觸發前，必須通過initEvent()初始化   相容性好IE支持 但是已廢棄
    var create = document.createEvent('Event');
    create.initEvent('create', false, false);

    //監聽
    document.addEventListener('create',function(e){
      console.log(e);
    })

    //觸發
    button.addEventListener('click',function(){
      document.dispatchEvent(create)
    })