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点要求，希望对大家的学习有所帮助，谢谢大家的阅读。