jsのaddEventListener()とremoveEventListener()の分析

この記事では、イベント ハンドラーの指定と削除の操作を処理するために使用される addEventListener() と RemoveEventListener() について詳しく紹介します。興味のある方は、

addEventListener() と RemoveEventListener() を参照してください。イベント ハンドラー操作の指定と削除を処理するために使用されます。
これら 2 つのメソッドはすべての DOM ノードに含まれており、どちらも 3 つのパラメーターを受け入れます: 処理されるイベントの名前、イベント ハンドラーとしての関数、およびブール値。

最後のブールパラメータは true で、イベント ハンドラーがキャプチャ フェーズ中に呼び出されることを意味します。
false (false-default) の場合、イベント ハンドラーがバブリング フェーズ中に呼び出されることを意味します。

addEventListener には合計 3 つのパラメーターがあります。構文は次のとおりです。
element.addEventListener(type,listener,useCapture)

以下に詳細を説明します。
1. Element は関数がバインドされるオブジェクトです。
2. Type はイベント名です。「onclick」は「click」に、「onblur」は「blur」に変更する必要があります。これは、イベント名に「on」を含めないことを意味します。
3. リスナーはもちろん括弧で囲わないように注意してください。addEventListener の 3 番目のパラメーター (useCapture) に注目してください。 。

ボタンのクリック イベントのイベント ハンドラーを追加するには、次のコードを使用できます:

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

DOM2 レベルのアプローチを使用してイベント ハンドラーを追加する主な利点は、複数のイベント ハンドラーを追加できることです。次の例を見てください: addEventListener() によって追加されたイベント ハンドラーは、removeEventListener(); を使用してのみ削除できます。

削除時に渡されるパラメーターは、ハンドラーの追加時に使用されるものと同じです。

これは、次の例に示すように、addEventListener() 経由で追加された
匿名関数は削除できないことも意味します:

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

btn.addEventListener("click", function () {
  alert(this.id);
}, false);  
btn.addEventListener("click", function () {
  alert("Hello World");
}, false);

この例では、addEventListener() を使用してイベント ハンドラーを追加します。 removeEventListener の呼び出しには同じパラメーターが使用されているように見えますが、実際には、2 番目のパラメーターは addEventListener() に渡される関数とはまったく異なる関数です。

removeEventListener() に渡されるイベント ハンドラー関数は、addEventListener() に渡されるイベント ハンドラー関数と同じである必要があります。

次の例に示すように:

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

btn.addEventListener("click", function () {
   alert(this.id);
}, false);
btn.removeEventListener("click", function () { //无效！
   alert(this.id);
}, false);

同じであるため、この書き換えられた例には問題はありません。関数はaddEventListener()とremoveEventListener()で使用されます。

実験結果としては、ユーザーがボタンをクリックすると毎回「クリックされました！」が出力され、removeEventListener()関数が機能しないことがわかります。

情報を検索して結論を​​導き出します。 RemoveEventListener() 関数を使用する場合、ハンドラー関数は addEventListener() のハンドラー関数と同じである必要があります。

つまり、上に書かれたコードは間違っています。修正されたコードは次のようになります。

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

js を学習する必要がある学生は、php 中国語 Web サイト

js ビデオ チュートリアル

に注意してください。多くの js オンライン ビデオ チュートリアルは無料で視聴できます。

以上がjsのaddEventListener()とremoveEventListener()の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。