Question

我对if (obj.attachEvent) {...}块中的代码感到困惑。我在查看此页面时找到了此示例：http://codebits.glennjones.net/cheatsheet/javascript.htm#events

无论如何，有人可以解释代码在做什么吗？我假设obj是一个DOM元素，type是事件的类型（如click或hover），而fn是回调函数

function addEvent(obj, type, fn) {
    if (obj) {
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function () { obj['e' + type + fn](window.event); };
            obj.attachEvent('on' + type, obj[type + fn]);
        } else {
            obj.addEventListener(type, fn, false);
        }
    }
};

我总是使用以下代码来执行跨浏览器事件附件（没有jQuery）。以上方法是否比我做得更好？

function attachEvent(element, type, fn) {
    if (element.addEventListener) {
        element.addEventListener(type, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, fn);
    }
};

Answer 1

在下面的代码中评论：

if (obj.attachEvent) {  //if the browser supports the attachEvent method
    obj['e' + type + fn] = fn; //store the handler
    obj[type + fn] = function () { obj['e' + type + fn](window.event); }; //create the callback that invokes the handler stored above
    obj.attachEvent('on' + type, obj[type + fn]); //Attach an event handler to the on<event>, such as onclick
} else {
    obj.addEventListener(type, fn, false); //otherwise, default to browsers supporting addEventListener
}

Answer 2

如您所知attachEvent是Explorer中的函数，如果我们添加这样的监听器，我不确定在调用函数时this将引用什么。需要对此进行测试。

`element.attachEvent('on' + type, fn);`

但是这段代码

 obj['e' + type + fn] = fn;  // adds listener as a function of the object obj
 obj[type + fn] = function () { obj['e' + type + fn](window.event); };  // creates a proxy function which invokes the listener.
 obj.attachEvent('on' + type, obj[type + fn]);  // adds proxy function as listener

向对象添加一个函数，并从该函数调用原始侦听器函数。这可以确保原始侦听器函数this内部将引用已添加侦听器的对象。这实际上是我认为的旧版本的资源管理器。

将事件添加到DOM元素时，此代码如何工作？

2 个答案: