解释使用动态生成的DOM属性的IE事件绑定机制

Explain this IE event binding mechanism using dynamically generated DOM properties

本文关键字：IE 属性 事件 绑定 机制 DOM 解释 动态      更新时间：2023-09-26

我继承了一个非常难看的事件绑定包装器，我不知道它的原理。我所知道的是IE实现的插件，使用它打破，如果我试图取代它与一个简单的attachEvent或别名通过jQuery这段代码的作者已经在地方这么长时间，他已经忘记了它是什么和为什么。

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

我熟悉将函数直接附加到以事件钩子命名的HTML属性或DOM属性的非常基本的方法，但这看起来要糟糕得多。以下是我对发生的事情的解释:

创建一个字符串，前缀e，由事件钩子标签和字符串强制函数(!?)组成;在元素上创建一个同名的属性，并将函数赋值给它。

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

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

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

最后，使用attachEvent方法将前面的函数绑定到事件钩子。

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

你可以用:

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的两个非常奇怪的属性名的污染

相关文章：