快捷導(dǎo)航

javascript的事件觸發(fā)器介紹的實現(xiàn)

更新時間：2014年06月05日 11:53:58 作者：

這篇文章主要介紹了javascript的事件觸發(fā)器介紹的實現(xiàn),本文所指觸發(fā)器是用程序來觸發(fā)綁定的事件,而不是人為的去觸發(fā),需要的朋友可以參考下

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

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

復(fù)制代碼代碼如下:

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個參數(shù)：
  // 事件類型，是否冒泡，是否阻止瀏覽器的默認行為
  evt.initEvent(event, true, true);  
  return !element.dispatchEvent(evt);
 }
};

上面的方法可以兼容主流的瀏覽器以實現(xiàn)事件觸發(fā)器的功能。但是對于一些封裝好的事件處理系統(tǒng)，如jQuery的event模塊，就沒這么簡單了，只能通過模擬來實現(xiàn)了。我在之前寫過一個很簡單的事件處理系統(tǒng)，最近又碰到自定義事件的需求，于是在之前的事件系統(tǒng)的基礎(chǔ)上模擬了一個事件觸發(fā)器，代碼如下：

復(fù)制代碼代碼如下:

/**
 * 事件觸發(fā)器
 * @param { Object } DOM元素
 * @param { String / Object } 事件類型 / event對象
 * @param { Array }  傳遞給事件處理函數(shù)的附加參數(shù)
 * @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 : [];

 // 創(chuàng)建自定義的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 );
 }
 // 遞歸調(diào)用自身來模擬冒泡
 if( parent && !isStopPropagation ){
  data.shift();
  this.trigger( parent, event, data );
 }
}