Javascript イベント ハンドラーのいくつかのメソッドに関する簡単な説明_JavaScript スキル

イベントは、ユーザーまたはブラウザ自体によって実行されるアクションです。たとえば、クリックとマウスオーバーはイベントの名前です。イベントに対応する関数をイベントハンドラ（またはイベントリスナー）と呼びます。イベントのハンドラーを指定するにはいくつかの方法があります。
1: HTML イベント ハンドラー。
例:

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

type="button " value="click me" onclick="show()"/>


現在、このメソッドがより頻繁に使用されていると思いますが、イベント ハンドラーをhtml デメリットは2つあります。

(1) まず第一に、時差の問題があります。この例では、show() 関数がボタンの下とページの下部に定義されていると仮定すると、ページが show() 関数を解析する前にユーザーがボタンをクリックすると、エラー
(2) が発生します。 ) 2 番目の欠点は、html が JavaScript コードと密接に結合していることです。時刻ハンドラを変更する場合は、HTML コードと JavaScript コードの 2 か所を変更する必要があります。
その結果、多くの開発者は HTML イベント ハンドラーを放棄し、代わりに JavaScript を使用してイベント ハンドラーを指定しています。

2: Javascript 指定イベント ハンドラー
JavaScript 指定イベント ハンドラーには 3 つのメソッドが含まれます:
(1): DOM レベル 0 イベント ハンドラー 例:

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

var btn=document.getElementById("mybtn"); //Getボタンのリファレンス

btn.onclick=function(){
alert('clicked')
alert(this.id); // mybtn


追加されたイベント ハンドラーは、イベント フローのバブリング フェーズ中に処理されます。

DOM0 レベルのメソッドで指定されたイベント ハンドラーを削除します:
btn.onclick=null; // イベント ハンドラーを削除します
}
(2):DOM2 レベルのイベント ハンドラー
DOM2 レベルのイベントイベント ハンドラーの指定と削除の操作を処理するために、addEventListener() と RemoveEventListener() という 2 つのメソッドが定義されています。これら 2 つのメソッドはすべての DOM ノードに含まれており、どちらも 3 つのパラメーター (処理するイベントの名前、イベント ハンドラーとしての関数、およびブール値) を受け入れます。最後のパラメータが true の場合は、イベント ハンドラーがキャプチャ フェーズで呼び出されることを意味し、fasle の場合は、イベント ハンドラーがバブリング フェーズで呼び出されることを意味します。
例:

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

var btn= document.getElementById( "mybtn");

btn.addEventListener("click",function(){
alert(this.id);
},false); >DOM2 レベルを使用する イベント ハンドラーの主な利点は、複数のイベント ハンドラーを追加できることです。
例:

コードをコピー

コードは次のとおりです: var btn= document.getElementById( "mybtn"); btn.addEventListener("click",function(){ alert(this.id);

},false); click",function (){

alert("hello world!");
},false);


ここでボタン用に 2 つのイベント ハンドラーが追加されます。 2 つのイベント ハンドラーは、発生した順序で起動されます。
addEventListener() によって追加された時間ハンドラーは、removeEventListener() を使用してのみ削除できます。削除時に渡されるパラメーターは、追加時に使用されるものと同じです。これは、addEventListener() を通じて追加された匿名関数は削除できないことも意味します。
例:

コードをコピー

コードは次のとおりです: var btn= document.getElementById( "mybtn"); btn.addEventListener("click",function(){ alert(this.id); },false); >btn.removeEventListener("click",function(){ //このように書いても無駄です(2回目は1回目とは全く別の関数なので)

alert(this.id);

}, false);


解決策:




コードをコピーします

コードは次のとおりです:

var btn=document.getElementById("mybtn"); var hander=function(){ alert(this.id) }; "click" ,hander,false); btn.removeEventListener("click",hander,false); // 有効

注: ここでの 3 番目のパラメーターはすべて false であり、バブリング段階で追加されます。ほとんどの場合、さまざまなブラウザーとの互換性を最大限に高めるために、イベント ハンドラーはイベント フローのバブリング ステージに追加されます。
3: IE イベント ハンドラー
IE は、DOM のメソッドと同様の 2 つのメソッド、attachEvent() と detachEvent() を実装します。どちらのメソッドも、イベント ハンドラー名とイベント ハンドラー関数という同じ 2 つのパラメーターを受け入れます。 IE は時間バブリングのみをサポートしているため、attachEvent() を通じて追加されたすべてのイベント ハンドラーはバブリング ステージに追加されます。
例:

3:

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

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

注:attachEvent() 関数の最初のパラメータは、DOM の addEventListener() の「click」ではなく、「onclick」です。
attachEvent() メソッドを使用して、要素に複数のイベント ハンドラーを追加することもできます。
例:

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

var btn= document.getElementById( "mybtn");
btn.attachEvent("onclick",function(){
alert("clicked");
}); ,function() {
alert("hello world!");
});

AttachEvent() がここで 2 回呼び出され、同じボタンに 2 つの異なるイベント ハンドラーが追加されます。ただし、DOM メソッドとは異なり、これらのイベント ハンドラーは追加された順序では実行されず、逆の順序で起動されます。この例でボタンをクリックすると、最初に「hello world」が表示され、次に「クリックされました」と表示されます。
attachEvent() を使用して追加されたイベントは、同じパラメータであれば detachEvent() で削除できます。

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

var btn=document.getElementById("mybtn ");
var hander=function(){
alert("clicked");
}
btn.detachEvent("onclick",hander}); //

上記の 3 つのメソッドは現在、主要なイベント ハンドラー メソッドです。これを見ると、ブラウザーごとに異なる違いがあるため、ブラウザー間イベント ハンドラーをどのように確保するか? と考えるでしょう。

クロスブラウザー方式でイベントを処理するために、多くの開発者はブラウザーの違いを分離できる Javascript ライブラリを使用しており、一部の開発者は最適なイベント処理メソッドを独自に開発しています。
ここでは EventUtil オブジェクトが提供されており、ブラウジング中の差異を処理するために使用できます。

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

var EventUtil = {

addHandler: function(element, type, handler){ // このメソッドは 3 つのパラメータを受け入れます: 操作対象の要素、イベント名、イベントhandler function
if (element.addEventListener){ //渡された要素に DOM2 レベルのメソッドがあるかどうかを確認します
element.addEventListener(type, handler, false) // 存在する場合は、このメソッドを使用します} else if (element .addEvent){ // IE メソッドがある場合は、
element.attachEvent("on" type, handler); // ここでのイベント タイプにはプレフィックスを付ける必要があることに注意してください。 「オン」で。
} else { // 最後の可能性は、DOM0 レベルを使用することです
element["on" type] = hander;
}
},

removeHandler: function(element, type, handler){ // このメソッドは、以前に追加されたイベント ハンドラーを削除します
if (element.removeEventListener){ // 渡された要素が存在するかどうかを確認します DOM2 レベルのメソッド
element.removeEventListener(type, handler) , false); // 存在する場合はこのメソッドを使用します
} else if (element.detachEvent){ // 存在する場合は IE のメソッド
element.detachEvent("on" type, handler);次に、IE メソッドを使用します。ここでのイベント タイプには先頭に「on」を付ける必要があることに注意してください。
} else { // 最後の可能性は、DOM0 とメソッドを使用することです (最新のブラウザでは、ここのコードは実行しないでください)
element["on" type] = null;


EventUtil オブジェクトは次のように使用できます:

コードをコピー

コードは次のとおりです:

var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked")
};コードの一部は省略されています
EventUtil.addHandler(btn,"click",hander);
//ここではコードの一部が省略されています
EventUtil.removeHandler(btn,"click",hander); //削除前 追加したイベントハンドラ

が表示されます イベントハンドラの追加と削除にはaddHandlerとremoveHandlerを使うととても便利です。