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 を起動しません。

総合アプリケーション

コードをコピー コードは次のとおりです。

if (window. attachEvent)
{
//IEのイベントコード
}
else
{
//他のブラウザのイベントコード
}

メソッド 3、イベント = 関数

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

これが私の解決策です:

コードをコピーしますコードは次のとおりです:

function show(){
alert("Hello, world!!!");
}

obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');

attachEvent メソッド、あるイベントには他の処理イベントが関連付けられています。 (Mozilla シリーズはサポートされていません)

Mozilla シリーズの addEventListener メソッド

例:

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

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

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

//object.attachEvent(event,function);

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

Mozilla シリーズの場合、このメソッドはサポートされていないため、addEventListener を使用する必要があります

var btn1Obj = document.getElementById("btn1");

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

実行順序はメソッド1->メソッド2->メソッド3です

使用例:

1.

コードをコピーします コードは次のとおりです:

var el = EDITFORM_DOCUMENT.body ;
//最初にオブジェクトを取得します。EDITFORM_DOCUMENT は実際には iframe です
if (el.addEventListener){
el.addEventListener('click', KindDisableMenu, false);
} else if (el .attachEvent){
el.attachEvent('onclick', KindDisableMenu);
}


2.

コードをコピーします コードは次のとおりです:

if (window.addEventListener) {
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
window.attachEvent('onload', _uCO);
}