JavaScript イベント ハンドラーの概要_JavaScript スキル

1. DOM レベル 0 イベント ハンドラー
イベント ハンドラー属性に関数値を与えます。
例:

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

var btn = document.getElementById( "myBtn");
btn.onclick = function(){
alert(this.id) //"myBtn"
}

イベントを削除、btn.onclick = null
---------------------------------------- ---------- ------------------------------------
2. DOM2 レベルのイベント ハンドラー
最初に、「DOM レベル 2 イベント」で定義された 2 つのメソッドを紹介します。これらは、イベント ハンドラーの指定と削除の操作を処理するために使用されます:
addEventListener()
removeEventListener()
すべての DOM ノード これら 2 つのメソッドが含まれており、処理イベント名、イベント ハンドラーとしての関数、およびブール値の 3 つのパラメーターを受け入れます。
最後のブールパラメータ、true: キャプチャフェーズでイベントハンドラを呼び出すことを意味し、false: バブリングステージでイベントハンドラを呼び出すことを意味します。

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

var btn = document.getElementById("myBtn ");
btn.addEventListener("click",funciton(){
alert(this.id);
},false);

DOM2 でイベント ハンドラーを追加level メソッドの主な利点は、複数のイベント ハンドラーを追加できることです。
例:

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

var btn = document.getElementById( "myBtn");
btn.addEventListener("click",funciton(){
alert(this.id);
},false); click",funciton (){
alert(“Hello World!”);
},false);

これら 2 つのイベントは順番にトリガーされます。
addEventListener() を通じて追加されたイベントは、removeEventListener() を使用してのみ削除できます。削除時に渡されるパラメーターは、追加時のパラメーターと一致している必要があります。つまり、匿名関数は削除できません。

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

var btn = document.getElementById("myBtn ");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click" , handler , false);
btn.removeEventListener ("click ", handler, false);

ほとんどの場合、イベント ハンドラーは、さまざまなブラウザーとの互換性を保つために、イベント フローのバブリング フェーズに追加されます。
Firefox、safari、chrome、opera は DOM2 レベルのイベント ハンドラーをサポートしています。
----------------------------------------------- --- ----------------------------------

3. IE イベントハンドラ IE は、DOM のメソッドと同様の 2 つのメソッドを実装します。
attachEvent()
detachEvent()
どちらのメソッドも、イベント ハンドラー名とイベント ハンドラー関数の 2 つのパラメーターを受け入れます。
IE は時間バブリングのみをサポートしているため、attachEvent() を通じて追加されたイベント ハンドラーはバブリング フェーズに追加されます。
例:

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

var btn = document.getElementById( "myBtn");
btn.attachEvent("onclick" , function(){
alert("Clicked");
})

attachEvent() 最初のパラメータは「click」ではなく「onclick」です。
IE のattachEvent() と DOM0 の addEventListener() の主な違いは、イベント ハンドラーのスコープです。
DOM0 レベルのメソッドの場合、イベント ハンドラーはそれが属する要素のスコープで実行されます。
attachEvent() メソッドの場合、イベント ハンドラーはグローバル スコープで実行されるため、これは window と同等です。
attachEvent() は、要素に複数のイベント ハンドラーを追加することもできます。

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

var btn = document.getElementById("myBtn ");
btn.attachEvent("onclick" , function(){
alert("clicked");
})
btn.attachEvent("onclick" , function(){
alert( "Hello World!")
})


DOM メソッドとは異なり、これらのイベント ハンドラーは追加された順序ではなく、逆方向に実行されます。
detachEvent() の使用法は、removeEventListener() の使用法と同じです。
----------------------------------------------- --- ----------------------------------
4. クロスブラウザー イベント ハンドラー

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

var EventUtil = {
addHandler : function( 要素, タイプ, ハンドラー){
if (element.addEventListener){
element.addEventListener(タイプ, ハンドラー, false)
} else if ( element.attachEvent); >element.attachEvent( "on" type , handler)
} else {
element["on" type] = handler;
}
},
removeHandler: function( element , type , handler){
if ( element.removeElementListener) {
element.removeElementListener( type , handler , flase);
} else if ( element.detachEvent) {
element.detachEvent ( "on" type , handler)
} else {
element["on" type] = ハンドラー;
}
}
}