javascript的事件觸發程序介紹的實現

事件觸發程序從字面意思上可以很好的理解，就是用來觸發事件的，但是有些沒有用過的朋友可能就會迷惑了，事件不是通常都由使用者在頁面上的實際操作來觸發的嗎？這個觀點不完全正確，因為有些事件必須由程式來實現，如自訂事件，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手冊中有介紹。畢竟這個功能不是很重要，暫時也沒做過多的深究。