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

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

正如你所知道attachEvent是在资源管理器的功能，我不知道会有什么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内将引用已添加侦听器的对象。这实际上是我认为的老版本的浏览器。

Answer 2

评论如下代码：

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 
}