場合によっては、JavaScript イベントの一部のメソッドを動的にロードする必要があります。
多くの場合、JS にイベントを動的に追加する必要があるため、以下で説明するいくつかの方法を組み合わせて使用します。
メソッド 1、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('test');");
ここでは、setAttribute を使用して onclick 属性を指定しています。これはシンプルで理解しやすいです。
ただし、IE はこれをサポートしていません。IE が setAttribute 関数をサポートしていないわけではありませんが、オブジェクト属性、コレクション属性、イベント属性などの特定の属性を設定するための setAttribute の使用はサポートされていません。 set style、onclick、onmouseover は IE では機能しません。
方法 2、attachEvent と addEventListener を使用する
IEはattachEventをサポートします
obj.attachEvent("onclick", Foo);
functionFoo()
{
アラート("テスト");
}
併記も可能
obj.attachEvent("onclick", function(){alert("test");});
他のブラウザは addEventListener をサポートします
obj.addEventListener("クリック", Foo, false);
functionFoo()
{
アラート("テスト");
}
一緒に書くこともできます
obj.addEventListener("クリック", function(){alert("テスト");}, false);
AttachEvent イベントには onclick などの on がありますが、addEventListener には click などの on がないことに注意してください。
ちなみに、addEventListener の 3 番目のパラメーター (ほとんど使用されません) useCapture - true の場合、useCapture はユーザーがキャプチャを開始したいことを示します。キャプチャが開始されると、指定されたタイプのすべてのイベントは、ツリー内でその下にある EventTarget にディスパッチされる前に、登録された EventListener にディスパッチされます。ツリー上で発生しているイベントは、キャプチャを使用して指定された EventListener を起動しません。
包括的なアプリケーション
次のようにコードをコピーします。
if (window.attachEvent)
{
//IEイベントコード
}
それ以外
{
//他のブラウザのイベントコード
}
方法 3、イベント = 関数
例: obj.onclick = Foo;
これは複数のブラウザでサポートされていますが、古い仕様に属します (方法 2 は DOM2 仕様に属します)。使いやすいため、多くの状況で使用されます。
私の解決策は次のとおりです。
次のようにコードをコピーします。
関数 show(){
alert("こんにちは、世界!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
attachEvent メソッドは、他の処理イベントをイベントに添付します。 (Mozillaシリーズはサポートされていません)
addEventListenerメソッドはMozillaシリーズで使用されています
例：
document.getElementById("btn").onclick = メソッド 1;
document.getElementById("btn").onclick = メソッド 2;
document.getElementById("btn").onclick = メソッド 3;
このように書くとmedhot3のみが実行されます
次のように書きます。
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(イベント,関数);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
実行順序はメソッド3→メソッド2→メソッド1です。
Mozilla系の場合、このメソッドはサポートされていないため、addEventListenerを使用する必要があります。
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("クリック",method1,false);
btn1Obj.addEventListener("クリック",method2,false);
btn1Obj.addEventListener("クリック",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);
}