js_javascript スキルでイベントを動的にロードするいくつかの方法の概要

JavaScript イベントのいくつかのメソッドを動的にロードする必要がある場合があります。
多くの場合、JS でイベントを動的に追加する必要があります。これには、ブラウザの互換性の問題が関係します。多くの場合、以下で説明するメソッドを組み合わせて使用​​します。

メソッド 1、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert( 'テスト');");

ここでは、onclick 属性を指定するために setAttribute を使用します。これはシンプルで理解しやすいです。

ただし、IE は をサポートしていません。IE が setAttribute 関数をサポートしていないわけではありませんが、オブジェクト属性、コレクション属性、イベント属性などの特定の属性を設定するための setAttribute の使用はサポートされていません。つまり、setAttribute を使用します。style、onclick、および onmouseover 属性の設定は、IE では機能しません。

方法 2、attachEvent と addEventListener を使用する
IE はattachEvent

obj.attachEvent("onclick", Foo);
function Foo()
{
alert("Test");
}

一緒に記述することもできます
obj.attachEvent("onclick", function(){alert("test");});
他のブラウザは addEventListener をサポートします

obj.addEventListener("click", Foo, false);
function Foo()
{
alert("Test");
}

も一緒に書くことができます
obj.addEventListener("click", function(){alert("test");}, false);

attachEvent イベントには onclick などの on があるのに対し、addEventListener には click などの on がないことに注意してください。
ところで、addEventListener の 3 番目の引数 (めったに使用されません) useCapture - true の場合、useCapture はユーザーがキャプチャを開始したいことを示します。キャプチャが開始されると、指定されたタイプのすべてのイベントは、ツリー内でその下にある EventTarget にディスパッチされる前に、登録された EventListener にディスパッチされます。ツリー上で発生しているイベントは、キャプチャを使用して指定された EventListener を起動しません。

総合アプリケーション

例: obj.onclick = Foo;
これは複数のブラウザでサポートされています。これは古い仕様 (メソッド 2 は DOM2 仕様に属します) ですが、使いやすさのため、使用シーンも多いです。

これが私の解決策です:

Mozilla シリーズの addEventListener メソッド

例:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

このように書くとmedhot3のみが実行されます

は次のように記述されます:
var btn1Obj = document.getElementById("btn1");

btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent(" onclick",method3);
実行順序は、method3->method2->method1

//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

使用例:

1.