ホームページ > 記事 > ウェブフロントエンド > 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);
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 サイトの他の関連記事を参照してください。