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

我被

if（obj.attachEvent）{…}

块中的代码弄糊涂了。我在查看此页面时发现了以下示例：

不管怎样，有人能解释一下代码在做什么吗？我假设

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

---

以代码注释如下：

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
}

if（obj.attachEvent）{//如果浏览器支持attachEvent方法
obj['e'+type+fn]=fn；//存储处理程序
obj[type+fn]=function（）{obj['e'+type+fn]（window.event）；}；//创建调用上面存储的处理程序的回调
attachEvent（'on'+type，obj[type+fn]）；//将事件处理程序附加到on，例如onclick
}否则{
addEventListener（type，fn，false）；//否则，默认为支持addEventListener的浏览器
}

在下面的代码中注释：

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
}

if（obj.attachEvent）{//如果浏览器支持attachEvent方法
obj['e'+type+fn]=fn；//存储处理程序
obj[type+fn]=function（）{obj['e'+type+fn]（window.event）；}；//创建调用上面存储的处理程序的回调
attachEvent（'on'+type，obj[type+fn]）；//将事件处理程序附加到on，例如onclick
}否则{
addEventListener（type，fn，false）；//否则，默认为支持addEventListener的浏览器
}

正如您所知，

attachEvent

是Explorer中的函数，如果我们像这样添加侦听器，我不确定调用该函数时，

这个

指的是什么。需要对此进行测试

`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

---

向对象添加一个函数，并从该函数调用原始侦听器函数。这确保在原始侦听器函数

中，此

将引用已为其添加侦听器的对象。我想这实际上是针对旧版本的explorer的。

正如您所知，

attachEvent

是explorer中的函数，如果我们像这样添加侦听器，我不确定调用该函数时，该函数所指的是什么。需要对此进行测试

`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

---

向对象添加一个函数，并从该函数调用原始侦听器函数。这确保在原始侦听器函数

中，此

将引用已为其添加侦听器的对象。我想这实际上是针对旧版本的explorer。

不过

obj['e'+type+fn]

是如何工作的<代码>类型是一个字符串<代码>fn是一个函数。。。这个索引是如何工作的？它可以隐式调用toString（）来执行到字符串的转换。。。我不能100%确定它是否能做到。但是

obj['e'+type+fn]

是如何工作的<代码>类型是一个字符串<代码>fn是一个函数。。。这个索引是如何工作的？它可以隐式调用toString（）来执行到字符串的转换。。。我不是百分之百确定它是否会那样。有趣的是。。。我觉得这很有道理。很有趣。。。我认为这是有道理的。