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;};