自定義事件的觸發dispatchEvent

1. 對於標准瀏覽器，其提供了可供元素觸發的方法：element.dispatchEvent(). 不過，在使用該方法之前，我們還需要做其他兩件事，及創建和初始化。因此，總結說來就是：

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

舉個例子：

var dom = document.querySelector('#id')
dom.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).
分別表示：       事件名稱，是否可以冒泡，是否阻止事件的默認操作

 

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

 

 

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

//向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 可以創建一個更高度自定義事件，還可以附帶一些數據，具體用法如下：

var myEvent = new CustomEvent(eventname, options);

其中 options 可以是：

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

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

 

 

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

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

　　

參考：http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/