事件觸發器從字面意思上可以很好的理解，就是用來觸發事件的，但是有些沒有用過的朋友可能就會迷惑了，事件不是通常都由用戶在頁面上的實際操作來觸發的嗎？這個觀點不完全正確，因為有些事件必須由程序來實現，如自定義事件，jQuery的ajax框架的一些自定義事件就必須由事件觸發器來實現。當然，在一些特殊情況下，用事件觸發器來觸發事件比用戶的實際操作來觸發事件更方便。
對於實現事件觸發器，瀏覽器都有原生的方法來支持，但是在兼容性上又有很大的出入，這種兼容性的問題完全在意料之中，IE有自己的方法，其他標準瀏覽器也有一套方法，不說誰的方法好與不好，對於WEB開發者來說搞出幾套方法就是對開發人員的一種折磨。 IE支持fireEvent方法來實現事件觸發，標準瀏覽器支持dispatchEvent來實現事件觸發，兩面派的IE9是兩者都支持。下面是出自prototype.js的源碼(其實我是從司徒正美的博客複製過來的)：
複製代碼代碼如下:
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' );
// initEvent接受3個參數：
// 事件類型，是否冒泡，是否阻止瀏覽器的默認行為
evt.initEvent(event, true, true);
return !element.dispatchEvent(evt);
}
};
上面的方法可以兼容主流的瀏覽器以實現事件觸發器的功能。但是對於一些封裝好的事件處理系統，如jQuery的event模塊，就沒這麼簡單了，只能通過模擬來實現了。我在之前寫過一個很簡單的事件處理系統，最近又碰到自定義事件的需求，於是在之前的事件系統的基礎上模擬了一個事件觸發器，代碼如下：
複製代碼代碼如下:
/**
* 事件觸發器
* @param { Object } DOM元素
* @param { String / Object } 事件類型/ event對象
* @param { Array } 傳遞給事件處理函數的附加參數
* @param { Boolean } 是否冒泡
*/
trigger : function( elem, event, data, isStopPropagation ){
var type = event.type || event,
// 冒泡的父元素，一直到document、window
parent = elem.parentNode ||
elem.ownerDocument ||
elem === elem.ownerDocument && win,
eventHandler = $.data( elem, type + 'Handler' );
isStopPropagation = typeof data === 'boolean' ?
data : (isStopPropagation || false);
data = data && isArray( data ) ? data : [];
// 創建自定義的event對象
event = typeof event === 'object' ?
event : {
type : type,
preventDefault : noop,
stopPropagation : function(){
isStopPropagation = true;
}
};
event.target = elem;
data.unshift( event );
if( eventHandler ){
eventHandler.call( elem, data );
}
// 遞歸調用自身來模擬冒泡
if( parent && !isStopPropagation ){
data.shift();
this.trigger( parent, event, data );
}
}
模擬的原理並不難，給某元素綁定一個事件處理函數，如果有觸發事件的實際操作就會執行相應的事件處理函數，所以要達到事件觸發器的功能只要獲取到相應的事件處理函數然後執行就差不多了，這是最基本的。
在實際的事件發生時瀏覽器會生成一個event對象，裡麵包含了一些事件發生時的屬性和信息。如果沒有實際的事件發生是沒有這個event對象的，所以上面的代碼也創建了一個event對象滿足最基本的功能。
還有事件冒泡，如果沒有實際的事件發生，自然也不會有冒泡的行為，那麼如果要模擬冒泡的功能，就必須不斷的查找父元素並檢查是否綁定了相同類型的事件，直至到document和window為止，如果結構複雜，這種遞歸調用的方法性能估計會不怎麼樣。
最後是瀏覽器的默認行為，我覺得這個要去模擬相當麻煩，麻煩到不知如何去實現，比如a標籤默認的跳轉，我測試了jQuery的trigger，也沒有實現，但是一些其他的行為貌似又在API手冊中有介紹。畢竟這個功能不是很重要，暫時也沒做過多的深究。