跨浏览器事件处理 [英] Cross-browser event handling

问题描述

我需要一个跨浏览器功能来注册事件处理程序和（大多数）一致的处理程序体验。我不需要图书馆的全部重量或功能，如jQuery，所以我写了我自己的。我相信我已经用下面的代码完成了我的目标，到目前为止，我的测试已经取得了成功，但是我一直在盯着它太久了。在我的错误中，有没有任何缺陷？

编辑1：更新的IE块不要立即调用 func （感谢 Andy E的敏锐眼睛）。

编辑2：更新IE块调用 func.call（） code> with 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; 
} 
  

解决方案

：

  r = elem.attachEvent（on+ evt，func.call（elem，window.event））; 
  

这将立即执行 func（），而不是将其附加为事件的处理程序。而是将 func（）的返回值分配给事件，如果它的类型不是function

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

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

I need a cross-browser function for registering event handlers and a (mostly) consistent handler experience. I don't need the full weight or functionality of a library such as jQuery, so I've written my own. I believe I've accomplished my goals with the code below, and so far my testing has been successful, but I've been staring at it for too long. Are there any flaws in my logic or gotchas that I'm missing?

EDIT 1: Commented each block with browser intent for clarity. Updated IE block to not call func right away (thanks to Andy E's keen eyes).

EDIT 2: Updated IE block to call func.call() with this instead of elem.

EDIT 3: Updated to pass JSLint with "the Good Parts."

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

解决方案

There's a problem on this line:

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

This will execute func() immediately, instead of attaching it as a handler for the event. Instead, the return value of func() will be assigned to the event, which will throw an error if it's type isn't "function".

I can understand that you don't want to use a framework, but many (many) others have written cross-browser event handling snippets. John Resig has one version, Google for "javascript addEvent" for many more.

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

这篇关于跨浏览器事件处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！