跨浏览器事件处理

我需要一个跨浏览器函数来注册事件处理程序和（大部分）一致的处理程序体验。我不需要像jQuery这样的库的全部重量或功能，所以我写了自己的。我相信我已经用下面的代码完成了我的目标，到目前为止，我的测试已经取得成功，但我一直盯着它太久。我的逻辑或缺陷中是否存在缺失的缺陷？跨浏览器事件处理

编辑1：为了清晰起见，用浏览器意图评论每个块。更新IE块，不要立即致电func（感谢Andy E's keen eyes）。

编辑2：更新IE块调用func.call()与this代替elem。

编辑3：更新为通过JSLint与“良好的部分”。

function hookEvent(elem, evt, func) 
{ 
    if (typeof elem === "string") 
    { 
     elem = document.getElementById(elem); 
    } 
    if (!elem) 
    { 
     return null; 
    } 
    var old, r; 
    if (elem.addEventListener) //w3c 
    { 
     elem.addEventListener(evt, func, false); 
     r = true; 
    } 
    else if (elem.attachEvent) //ie 
    { 
     elem[evt + func] = function() 
     { 
      func.call(this, window.event); 
     }; 
     r = elem.attachEvent("on" + evt, elem[evt + func]); 
    } 
    else      //old 
    { 
     old = elem["on" + evt] ? elem["on" + evt] : function (e) { }; 
     elem["on" + evt] = function (e) 
     { 
      if (!e) 
      { 
       e = window.event; 
      } 
      old.call(this, e); 
      func.call(this, e); 
     }; 
     r = true; 
    } 
    return r; 
}

来源

2010-08-25 Bill Ayakatubby

jQuery是一个非常轻量级的库。使用它有什么问题？有人已经为你完成了所有的工作。或者你只是没有兴趣学习它？ – 2010-08-25 17:49:14

@熊会吃掉你 - 66K加上，相比之下，这远非轻量级。特别是如果这就是他所需要的。 @ Bill Ayakatubby - 通过“跨浏览器”，你的意思是，“标准的东西，IE浏览器不能正确处理”。 – Rob 2010-08-25 17:52:52

@熊：在这个时候，我唯一的跨浏览器问题是事件注册，所以我不需要jQuery或其他库。如果我的情况发生变化，我会重新评估图书馆的必要性。 – 2010-08-25 17:54:16

有一个关于此行的一个问题：

r = elem.attachEvent("on" + evt, func.call(elem, window.event));

这将执行FUNC（）立即，而不是安装它作为事件的处理程序。相反，将返回值func（）将被分配给该事件，如果它的类型不是"function"，则会引发错误。

我可以理解你不想使用框架，但许多人（许多）其他人已经编写了跨浏览器事件处理片段。 John Resig有一个版本，Google为“javascript addEvent”提供了更多功能。

http://www.google.com/search?q=javascript+addevent

来源

2010-08-25 17:54:59

感谢您的反馈，安迪。我更新了我的代码以反映您的发现。 – 2010-08-25 18:17:16

跨浏览器事件处理

回答

相关问题