說到原生瀏覽器事件函數處理相容,大家可能會想到addEventListener().....以及attachEvent()....相信看了下文,會給你提供不一樣的更優雅的實現方式,希望下文會對你有幫助~~~~~ 總結:以上方法也是jquery源碼中Event模塊中add的方法的借鑒來源,資料來源於此 ...
說到原生瀏覽器事件函數處理相容,大家可能會想到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/