這篇文章主要為大家詳細介紹了JavaScript綁定事件監聽函數的通用方法，感興趣的朋友可以參考一下
事件綁定的3中常用方法：傳統綁定、W3C綁定方法、IE綁定方法。但是，在實際開發中對于我們來講重要的是需要一個通用的、跨瀏覽器的綁定方法。如果我們在互聯網上搜索一下會發現許多方法，以下是比較知名的幾種方法：
在開始學期下面幾種方法之前，應當討論一下，一個好的addEvent()方法應當達到哪些要求：
a、支持同一元素的同一事件句柄可以綁定多個監聽函數；
b、如果在同一元素的同一事件句柄上多次注冊同一函數，那么第一次注冊后的所有注冊都被忽略；
c、函數體內的this指向的應當是正在處理事件的節點（如當前正在運行事件句柄的節點）；
d、監聽函數的執行順序應當是按照綁定的順序執行；
e、在函數體內不用使用 event = event || window.event; 來標準化Event對象；
一、John Resig 所寫的 addEvent() 函數
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
這個函數如此簡單易懂，的確非常令人驚訝。那么我們還是要看看上面的五點要求：
對于第一點滿足了；
對于第三點和第五點，肯定也滿足了；
對于第二點，并沒有滿足，因為addEventListener()會忽略重復注冊，而attachEvent()則不會忽略；
但是第四點，并沒有滿足，因為Dom標準沒有確定調用一個對象的時間處理函數的順序，所以不應該想當然的認為它們以注冊的順序調用。
但是這個函數仍然是一個非常優秀的函數。
二、Dean Edward 所寫的 addEvent() 函數
function addEvent(element, type, handler) {
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
handlers[handler.$$guid] = handler;
element["on" + type] = handleEvent;
}
addEvent.guid = 1;
function removeEvent(element, type, handler) {
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
}
function handleEvent(event) {
var returnValue = true;
event = event || fixEvent(window.event);
var handlers = this.events[event.type];
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
該函數使用了傳統的綁定方法，所以它可以在所有的瀏覽器中工作，也不會造成內存泄露。
但是對于最初提出的5點，該函數只是滿足了前四點。只有最后一點沒有滿足，因為在JavaScript中對for/in語句的執行順序沒有規定是按照賦值的順序執行，盡管大部分時刻是按照預期的順序執行，因此在不同的JavaScript版本或實現中這一語句的順序有可能不同。
三、Dean Edward 的 addEvent() 函數的改進
Array.prototype.indexOf = function( obj ){
var result = -1 , length = this.length , i=length - 1;
for ( ; i>=0 ; i-- ) {
if ( this[i] == obj ) {
result = i;
break;
}
}
return result;
}
Array.prototype.contains = function( obj ) {
return ( this.indexOf( obj ) >=0 )
}
Array.prototype.append = function( obj , nodup ) {
if ( !(nodup && this.contains( obj )) ) {
this[this.length] = obj;
}
}
Array.prototype.remove = function( obj ) {
var index = this.indexOf( obj );
if ( !index ) return ;
return this.splice( index , 1);
};
function addEvent(element , type , fun){
if (!element.events) element.events = {};
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = [];
if(element['on' + type]) {
handlers[0] = element['on' + type];
}
}
handlers.append( fun , true)
element['on' + type] = handleEvent;
}
function removeEvent(element , type , fun) {
if (element.events && element.events[type]) {
element.events[type].remove(fun);
}
}
function handleEvent(event) {
var returnValue = true , i=0;
event = event || fixEvent(window.event);
var handlers = this.events[event.type] , length = handlers.length;
for ( ; i < length ; i++) {
if ( handlers[i].call( this , event) === false ){
returnValue = false;
}
}
return returnValue;
}
function fixEvent(event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
}
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
該函數是本人對Dean Edward 的 addEvent() 函數的改進，完全滿足了最初提出的5點要求，希望對大家的學習有所幫助
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
