javascript--addEvent Listener()とremoveEvent Listener

addEvent Listener()とremoveEventListener()は、イベントハンドラの指定と削除を処理するために使用されます.すべてのDOMノードにはこの2つの方法が含まれており、それらは3つのパラメータを受け入れる.処理するイベント名と、イベントハンドラの関数として、1つのブール値.このブール値のパラメータはtrueで、捕獲段階でイベントハンドラを起動することを表します.falseであれば、泡立ち段階でイベントハンドラを呼び出すという意味です.
ボタンにイベントハンドラを追加するには、下記のコードが使えます.

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

btn.addEventListener("click", function () {

    alert(this.id);

}, false);

 
DOM 2レベルの方法を使ってイベントハンドラを追加する主な利点は、複数のイベントハンドラを追加できることである.次の例を見てみます.

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

btn.addEventListener("click", function () {

    alert(this.id);

}, false);

btn.addEventListener("click", function () {

    alert("Hello World");

}, false);

 
addEventListener()に追加されたイベントハンドラは、removeEventListener()のみを使用して除去されます.除去時に入ってきたパラメータは、処理プログラムを追加する時に使用したパラメータと同じです.これは、以下の例に示すように、addEventListener()によって追加された匿名関数が除去されないことを意味する.

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

btn.addEventListener("click", function () {

    alert(this.id);

}, false);

btn.removeEventListener("click", function () {  //  ！

    alert(this.id);

}, false);

 
この例では、addEvent Listener()を使ってイベントハンドラを追加します.removeveveveveveventListener(0は同じパラメータを使用しているように見えるが、実際には、2番目のパラメータは、addEventListener()に入ってきたものとは全く異なる関数である.レモveveventListener()に入ってくるイベントハンドラ関数は、次のようにaddEventListener()に同じでなければならない.

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

var handler = function () {

        alert(this.id);

    };

btn.addEventListener("click", handler, false);

btn.removeEventListener("click", handler, false);  //  ！

 
書き換えたこの例は問題ないです.addEventListener()とremoveveveveveventListener()で同じ関数を使うからです.
多くの場合、イベントハンドラをイベントフローの発泡段階に追加することで、様々なブラウザに最大限に対応できるようにしています.ターゲットに到達するまでに時間が必要なときだけ、イベントハンドラをキャプチャ段階に追加してください.特に必要でない場合は、イベントハンドラをイベントキャプチャ段階に登録することは推奨されません.