抛弃IE的attachEvent吧

给元素添加事件，在标准浏览器中使用addEventListener，而在IE中使用attachEvent，但是IE的attachEvent不支持捕获阶段的事件处理程序，并且同一个处理程序能添加多次。

Dean Edwards给出了一种不使用attachEvent添加事件处理程序的方法，解决了同一个处理程序可以添加多次的问题，并且修正了IE中event对象与标准浏览器中event对象的差别。

下面是参考Dean Edwards写法的一段程序：

  1. <script type="text/javascript"> 
  2.     /** 
  3.      * 添加事件 
  4.      * @param {Object} el 
  5.      * @param {Object} type 
  6.      * @param {Object} fn 
  7.      */ 
  8.     var addEvent = function(el, type, fn) { 
  9.         //如果是标准浏览器，则使用addEventListener方法添加事件 
  10.         if(window.addEventListener){ 
  11.             el.addEventListener(type, fn, false); 
  12.             return; 
  13.         } 
  14.         //计数器，用于给每个事件处理函数一个唯一的ID 
  15.         if(!addEvent.guid) 
  16.             addEvent.guid = 0; 
  17.         //将ID赋给事件处理函数 
  18.         if(!fn._id) 
  19.             fn._id = addEvent.guid++; 
  20.         //events对象用于存储所有的事件类型 
  21.         if(!el.events) 
  22.             el.events = {}; 
  23.         //不同的事件类型(click、mouseover等)作为events的一个属性 
  24.         var handles = el.events[type]; 
  25.         if(!handles){ 
  26.             //el.events[type]作为一个存储此类事件处理函数的对象 
  27.             handles = el.events[type] = {}; 
  28.             if(el["on" + type]) 
  29.             //handles[0]用于存储已使用el.onclick形式定义的事件处理函数（也可以使用其他的属性，不一定要使用0） 
  30.                 handles[0] = el["on" + type]; 
  31.         } 
  32.         handles[addEvent.guid] = fn; 
  33.         el["on" + type] = addEvent.handleEvent; 
  34.     }; 
  35.     /** 
  36.      * 执行事件 
  37.      * @param {Object} event 
  38.      */ 
  39.     addEvent.handleEvent = function(event) { 
  40.         event = event || addEvent.fixEvent(); 
  41.         var handles = this.events[event.type]; 
  42.         for(var i in handles){ 
  43.             handles[i].call(this,event); 
  44.         } 
  45.     }; 
  46.     /** 
  47.      * 修复IE的event对象 
  48.      */ 
  49.     addEvent.fixEvent = function(){ 
  50.         var event = window.event; 
  51.         event.target = event.srcElememt; 
  52.         if(event.type == "mouseover") 
  53.             event.relatedTarget = event.fromElement; 
  54.         else if(event.type == "mouseout") 
  55.             event.relatedTarget = event.toElement; 
  56.         event.charCode = (event.type == "keypress" || event.type == "keydown" || event.type == "keyup") ? event.keyCode : 0; 
  57.         event.preventDefault = function(){ 
  58.             this.returnValue = false; 
  59.         } 
  60.         event.stopPropagation = function(){ 
  61.             this.cancelBubble = true; 
  62.         } 
  63.         return event; 
  64.     }; 
  65.     /** 
  66.      * 移除事件 
  67.      * @param {Object} el 
  68.      * @param {Object} type 
  69.      * @param {Object} fn 
  70.      */ 
  71.     var delEvent = function(el, type, fn){ 
  72.         if(window.removeEventListener){ 
  73.             el.removeEventListener(type, fn); 
  74.             return; 
  75.         } 
  76.         if(el.events){ 
  77.             var fns = el.events[type]; 
  78.             if(fns) 
  79.                 delete fns[fn._id]; 
  80.         } 
  81.     }; 
  82. </script> 
posted @ 2013-06-26 17:15  djfu  阅读(202)  评论(0)    收藏  举报