javascript - 使用动态生成的 DOM 属性解释这个 IE 事件绑定(bind)机制

Question

我继承了一个看起来极其令人讨厌的事件绑定(bind)包装器，但我不明白其基本原理。我所知道的是，如果我尝试用简单的 attachEvent 或 jQuery 的别名替换它，使用它的插件的 IE 实现就会中断。这段代码的作者已经使用它很长时间了，他忘记了它的方式和原因。

function AddEvent(obj, type, fn) {
    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);
    }
};

我熟悉将函数直接附加到为事件 Hook 命名的 HTML 属性或 DOM 属性的非常基本的方法，但这看起来更糟糕。这是我对正在发生的事情的解释:

创建一个字符串，前缀为e，由事件钩子(Hook)标签和字符串强制转换函数(!？)组成；在相关元素上创建该名称的属性，并将函数分配给它。

obj['e' + type + fn] = fn;

没有前缀的相同字符串将是元素的另一个属性，它调用一个函数，该函数又执行原始传递的函数(由于某种原因使用我们刚刚定义的别名)，带有 window.event 作为参数。

obj[type + fn] = function() {
    obj['e' + type + fn](window.event);
};

最后，使用attachEvent方法将前面的函数绑定(bind)到事件 Hook 。

obj.attachEvent('on' + type, obj[type + fn]);

Answer 1

您可以将其替换为:

function AddEvent(obj, type, fn) {
    if (obj.attachEvent) {
        obj.attachEvent('on' + type, function (event) {
            return fn(event || window.event);
        });
    }
    else {
        obj.addEventListener(type, fn, false);
    }
};

除非对 obj 的污染有一些依赖，有两个非常奇怪的属性名称。