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

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

WBOY

リリース： 2016-05-16 17:52:12

オリジナル

1041 人が閲覧しました

イベントは、ユーザーまたはブラウザ自体によって実行されるアクションです。たとえば、クリックとマウスオーバーはイベントの名前です。イベントに対応する関数をイベントハンドラ（またはイベントリスナー）と呼びます。イベントのハンドラーを指定するにはいくつかの方法があります。
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を使うととても便利です。