跨瀏覽器事件相容,巧妙處理方法

說到原生瀏覽器事件函數處理相容，大家可能會想到addEventListener().....以及attachEvent()....
相信看了下文，會給你提供不一樣的更優雅的實現方式，希望下文會對你有幫助~~~~~

//添加事件處理函數
function  addEvent(element, type, handler){
    //如果函數之前沒有綁定過事件（包括通過dom一級 on+‘方法名’綁定的），則增加函數的唯一標識，以便移除事件用到
    if(!handler)  handler.$$guid = addEvent.$$guid ++;
    //如果元素上不存在events對象則新建一個
    if(!element.events)  element.events = {};
   //如果events對象相應的類型存在的對象不存在，則新創建一個
    var handlers = element.events[type];
    if(!handlers){
         handlers = element.events[type] = {};
             //如果存在dom一級方式綁定了相同類型的事件，在type類型的事件觸發時一併觸發，這裡先type對應的對象handlers中
         if(element["on" + type]){
             handlers[0] = element["on" + type];
         }
    }
    //將事件處理函數以鍵值對如{$$guid : handler}的方式保存起來供後面調用
    handlers[handler.$$guid] = handler;
    //以下的handlerEvent方法本人認為很巧妙，可謂’偷梁換柱‘呀
    element["on" + type] = handleEvent;
}
addEvent.$$guid = 1;

//事件處理函數處理，精華所在
function handleEvent(event){
    //預設事件操作不取消
    var returnValue = true;
    //處理事件對象相容，包括冒泡和阻止預設事件傳播兩個方法
    event = event || fixEvent(window.event);
    var handlers = this.events[type];

    for(var i in handlers){
        //為了保證正確的上下文,即發生事件的dom元素
        this.$$handleEvent = handlers[i];
        //如果上面傳進來的函數返回值為false,則結果為了保持一致，也要為false
        if(this.$$handleEvent(event) === false){
            return returnValue = false;
        }
    }
  
    return returnValue；
}

function fixEvent(event){
    //添加w3c事件對象方法相容,返回的對象時具有相容性的event
  event.preventDefault = fixEvent.preventDefault;
  event.stopPropagation = fixEvent.stopPropagation;
  return event;
}
 //處理ie下event相容
fixEvent.preventDefault = function (){
    this.returnValue = false;
}
fixEvent.stopPropagation = function(){
    this.cancelBubble = true;
};

//移除事件處理函數
function removeEvent(element, type, handler){
    if(element.events  && element.events[type])
        delete  element.events[type][handler.$$guid]
}

總結：以上方法也是jquery源碼中Event模塊中add的方法的借鑒來源，資料來源於此博客http://dean.edwards.name/weblog/2005/10/add-event/