值得推荐的事件捕获函数AddEvent()

 

1， 下面是JQuery之父推荐的添加移除事件方法。

Java代码

1. /*  
2. *obj    要绑定事件的对象  
3. *type   事件类型，指"click", "load", "submit", "mouseover"等  
4. *fn     函数名  
5. */   
6. function addEvent( obj, type, fn )   
7. {   
8.     if  ( obj.attachEvent )   
9.    {   
10.       obj[ 'e'  + type + fn] = fn;   
11.       obj[type + fn] = function()   
12.       {           
13.          obj[ 'e'  + type + fn]( window.event );   
14.       }   
15.       obj.attachEvent(  'on'  + type, obj[type + fn] );   
16.    }   
17.     else   
18.    obj.addEventListener( type, fn,  false  );   
19. }   
20. /*  
21. *obj    要删除事件的对象  
22. *type   事件类型，指"click", "load", "submit", "mouseover"等  
23. *fn     函数名  
24. */   
25. function removeEvent( obj, type, fn )   
26. {   
27.     if  ( obj.detachEvent )   
28.    {   
29.       obj.detachEvent(  'on'  + type, obj[type + fn] );   
30.       obj[type + fn] =  null ;   
31.    }   
32.     else   
33.    obj.removeEventListener( type, fn,  false  );   
34. }   
35.   
36.   
37. //addEvent( document.getElementById('foo'), 'click', doSomething );   
    

2.《Pro JavaScript Techniques》来看，John Resig大大推荐了Dean Edwards的addEvent()方法，而没推荐自己更精简的作品，他这样评价Edwards的addEvent()的：

1 ， 可以在所有浏览器中工作，就算是古老得无任何支持的浏览器；   

1. 2 ，  this 关键字可在所有的绑定函数中使用，指向的是当前元素；   
2. 3 ， 中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数；   
3. 4 ， 不管浏览器类型，事件对象总是作为第一个对象传入；   
4. 5 ， 唯一缺点是仅工作在冒泡阶段（因为深入使用事件绑定的传统方法）。   
5. 6 ， addEvent/removeEvent函数如此强大，绝对没有任何理由不在你的代码中使用。  

1， 可以在所有浏览器中工作，就算是古老得无任何支持的浏览器；
2， this关键字可在所有的绑定函数中使用，指向的是当前元素；
3， 中和了所有防止浏览器默认行为和阻止事件冒泡的各种浏览器特定函数；
4， 不管浏览器类型，事件对象总是作为第一个对象传入；
5， 唯一缺点是仅工作在冒泡阶段（因为深入使用事件绑定的传统方法）。
6， addEvent/removeEvent函数如此强大，绝对没有任何理由不在你的代码中使用。

而Dean Edwards这样说：
My solution is very different.

    * it performs no object detection
    * it does not use the addeventListener/attachEvent methods
    * it keeps the correct scope (the this keyword)
    * it passes the event object correctly
    * it is entirely cross-browser (it will probably work on IE4 and NS4)
    * and from what I can tell it does not leak memory

下面是Dean Edwards的addEvent/removeEvent函数：

Java代码

1. // http://dean.edwards.name/weblog/2005/10/add-event/   
2.   
3. function addEvent(element, type, handler) {   
4.      if  (element.addEventListener) {   
5.         element.addEventListener(type, handler,  false );   
6.     }  else  {   
7.          // 为每一个事件处理函数赋予一个独立的ID   
8.          if  (!handler.$$guid) handler.$$guid = addEvent.guid++;   
9.          // 为元素建立一个事件类型的Hash表   
10.          if  (!element.events) element.events = {};   
11.          // 为每对元素/事件建立一个事件处理函数的Hash表   
12.         var handlers = element.events[type];   
13.          if  (!handlers) {   
14.             handlers = element.events[type] = {};   
15.              // 存储已有的事件处理函数（如果已存在一个）   
16.              if  (element[ "on"  + type]) {   
17.                 handlers[ 0 ] = element[ "on"  + type];   
18.             }   
19.         }   
20.          // 在Hash表中存储该事件处理函数   
21.         handlers[handler.$$guid] = handler;   
22.          // 赋予一个全局事件处理函数来处理所有工作   
23.         element[ "on"  + type] = handleEvent;   
24.     }   
25. };   
26. // 创建独立ID的计数器   
27. addEvent.guid =  1 ;   
28.   
29. function removeEvent(element, type, handler) {   
30.      if  (element.removeEventListener) {   
31.         element.removeEventListener(type, handler,  false );   
32.     }  else  {   
33.          // 从Hash表中删除事件处理函数   
34.          if  (element.events && element.events[type]) {   
35.             delete element.events[type][handler.$$guid];   
36.         }   
37.     }   
38. };   
39.   
40. function handleEvent(event) {   
41.     var returnValue =  true ;   
42.      // 获取事件处理对象（IE使用全局的事件对象）   
43.     event = event || fixEvent((( this .ownerDocument ||  this .document ||  this ).parentWindow || window).event);   
44.      // 获取事件处理函数Hash表的引用   
45.     var handlers =  this .events[event.type];   
46.      // 依次处理每个事件处理函数   
47.      for  (var i in handlers) {   
48.          this .$$handleEvent = handlers[i];   
49.          if  ( this .$$handleEvent(event) ===  false ) {   
50.             returnValue =  false ;   
51.         }   
52.     }   
53.      return  returnValue;   
54. };   
55. //增加一些IE事件对象的缺乏的方法   
56. function fixEvent(event) {   
57.      // 增加W3C标准事件方法   
58.     event.preventDefault = fixEvent.preventDefault;   
59.     event.stopPropagation = fixEvent.stopPropagation;   
60.      return  event;   
61. };   
62. fixEvent.preventDefault = function() {   
63.      this .returnValue =  false ;   
64. };   
65. fixEvent.stopPropagation = function() {   
66.      this .cancelBubble =  true ;   
67. };