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);

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

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

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

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

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

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

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

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