javascript的事件觸發器介紹的實作_javascript技巧

事件觸發器從字面意思上可以很好的理解，就是用來觸發事件的，但是有些沒有用過的朋友可能就會迷惑了，事件不是通常都由用戶在頁面上的實際操作來觸發的嗎？這個觀點不完全正確，因為有些事件必須由程式來實現，例如自訂事件，jQuery的ajax框架的一些自訂事件就必須由事件觸發器來實現。當然，在一些特殊情況下，用事件觸發器來觸發事件比使用者的實際操作來觸發事件更方便。

對於實現事件觸發器，瀏覽器都有原生的方法來支持，但是在兼容性上又有很大的出入，這種兼容性的問題完全在意料之中，IE有自己的方法，其他標準瀏覽器也有一套方法，不說誰的方法好與不好，對WEB開發者來說搞出幾套方法就是對開發人員的一種折磨。 IE支援fireEvent方法來實現事件觸發，標準瀏覽器支援dispatchEvent來實現事件觸發，兩面派的IE9是兩者都支援。以下是來自prototype.js的源碼(其實我是從司徒正美的部落格複製過來的)：

複製程式碼 程式碼如下:

var fireEvent = function(elemente, > if (document.createEventObject){
  // IE瀏覽器支援fireEvent方法
  var evt = document.createEventObject();
  return element.fire}('on' event,evt) else{
  // 其他標準瀏覽器使用dispatchEvent方法
  var evt = document.createEvent( 'HTMLEvents' );
  // initituple( ，是否冒泡，是否阻止瀏覽器的預設行為
  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, elem, event, data , isStopPropagation ){
 var type = event.type || event,
  // 冒泡的父元素，一直到document、window
  parent = elem.parentNode || |
   elem === elem.ownerDocument && win,
  eventHandler = $.data( elem, type 'Handler' );

 isStopPropagation = moleanof data === >  data : (isStopPropagation || false);

 data = data && isArray( data ) ? data : [];

 // 建立自訂的物件 event === 'object' ?
  event : {
   type : type,
   preventDefault : noop,
   stopPropagation : function()
   stopPropagation : function():  };

 event.target = elem;  
 data.unshift( event );
 if( eventHandler ){
 } 🎜> // 遞歸呼叫自己模擬冒泡
 if( parent && !isStopPropagation ){
  data.shift();
  this.trigger( parent, event, data );
  this.trigger( parent, event, data );
}

模擬的原理並不難，給某元素綁定一個事件處理函數，如果有觸發事件的實際操作就會執行對應的事件處理函數，所以要達到事件觸發器的功能只要取得到對應的事件處理函數然後執行就差不多了，這是最基本的。

在實際的事件發生時瀏覽器會產生一個event對象，裡麵包含了一些事件發生時的屬性和資訊。如果沒有實際的事件發生是沒有這個event物件的，所以上面的程式碼也建立了一個event物件滿足最基本的功能。

還有事件冒泡，如果沒有實際的事件發生，自然也不會有冒泡的行為，那麼如果要模擬冒泡的功能，就必須不斷的查找父元素並檢查是否綁定了相同類型的事件，直到document和window為止，如果結構複雜，這種遞歸呼叫的方法效能估計會不怎麼樣。

最後是瀏覽器的預設行為，我覺得這個要去模擬相當麻煩，麻煩到不知如何去實現，比如a標籤默認的跳轉，我測試了jQuery的trigger，也沒有實現，但是一些其他的行為貌似又在API手冊中有介紹。畢竟這個功能不是很重要，暫時也沒做過太多的深究。