イベントを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なしで）次のコードを使用します。上記のアプローチは、私のやり方よりも優れていますか？あなたはattachEventは、エクスプローラの関数であり、私たちはこのようにリスナーを追加する場合、関数が呼び出されたときthisを参照してくださいなるかわからない知っているように

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 1

：以下のコードにコメント

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

Answer 2

。これをテストする必要があります。

`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の内部で、リスナーが追加されたオブジェクトを参照することが保証されます。これは実際には私が考えるエクスプローラの古いバージョンです。