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

问题描述

我需要一个跨浏览器功能来注册事件处理程序和（大部分）一致的处理程序体验。我不需要像jQuery这样的库的全部权重或功能，所以我写了我自己的。我相信我已经完成了我的目标与下面的代码，到目前为止我的测试已经成功，但我一直盯着它太久了。

编辑1：为了清晰起见，对每个块都添加了浏览器的注释。更新了IE块，不立即调用 func （感谢 Andy E的敏锐

编辑2：更新了IE块来调用 func.call（）

p> 修改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屋！