跨浏览器事件处理

发布于 2024-09-16 14:04:43 字数 1448 浏览 0 评论 0原文

我需要一个跨浏览器功能来注册事件处理程序和（大部分）一致的处理程序体验。我不需要 jQuery 等库的全部功能或功能，因此我编写了自己的库。我相信我已经通过下面的代码实现了我的目标，到目前为止我的测试已经成功，但我已经盯着它太久了。我的逻辑是否存在任何缺陷或我遗漏的陷阱？

编辑1：为了清晰起见，用浏览器意图注释了每个块。更新了 IE 块，使其不立即调用 func （感谢 Andy E 敏锐的目光）。

编辑2：更新了IE块以使用this而不是elem调用func.call()。

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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

东走西顾 2024-09-23 14:04:43

此行有一个问题：

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

这将立即执行 func()，而不是将其附加为事件的处理程序。相反，func() 的返回值将被分配给该事件，如果它的类型不是“function”，则会抛出错误。

我可以理解您不想使用框架，但许多（许多）其他人已经编写了跨浏览器事件处理片段。 John Resig</a> 有一个版本，Google 搜索“javascript addEvent”还有更多版本。

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

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

回复收藏 0 原文

~没有更多了~