addEventListener とattachEvent の違いについては多くのブログ投稿がありますが、そのほとんどは前者が Firefox chrome であり、後者が IE シリーズにのみ存在するという事実に焦点を当てています。 最近イベント プロキシを作成していたときに、実行時の addEventListener 関数とattachEvent 関数のコンテキストが異なるというバグに遭遇しました。同じです。 この違いを説明するために、簡単なデモを使用します: コードをコピーします コードは次のとおりです: < <テスト < /a> id ="div2"> /a> ; <br>var testGolb = "diff"; // グローバル変数を定義します <br>var a1 = document.getElementById( "a1"); document .getElementById( "a2"); <br>function getEleId ( e) { <br>// body... <br>alert( this.id) <br>alert( this.testGolb); } <br>a1.onclick = getEleId; <br>if( a2.attachEvent){ <br>a2.attachEvent( "onclick", getEleId); <br>}else{ <br>a2.addEventListener( 'click' , getEleId); <br>} <br></html> <br><br> <br><br>Chrome の最初のアラート: a1"、2 回目のアラート: "未定義" <br> Firefox での最初のアラート: " a1"、2 回目のアラート: "未定義" <br> IE での最初のアラート: " a1"、2 回目のアラート: "未定義" <br>これはわかりやすいですね。このとき、これはDOM #a1を指しているので、アラートIDは#a1のID「a1」になります。すると、この中に変数testGolbがないので未定義になります。 </div> <br>test2 をクリックします<strong> </strong>Chrome での最初のアラート: "a1"、2 回目のアラート: "unknown" <br>Firefox での最初のアラート: "a1"、2 回目のアラート: "未定義" <br>IE の最初のアラート:"未定義"、2 番目のアラート:"diff" <br><br>test1 をクリックすると Chrome と Firefox は同じ動作をしますが、IE は異なります。 AttachEvent を使用してイベントをバインドする場合、関数内の this はイベントが追加される dom ではなくウィンドウを指すため、最初のアラート値は未定義で、this.testGlob の値は diff です。