HTML要素.removeEventListener() 対応: DOM Level 2（2000）

element.removeEventListener("イベント名", 関数);

<button id="btn">クリック</button>
<button id="removeBtn">リスナー解除</button>
<p id="output"></p>

var btn = document.querySelector("#btn");
var removeBtn = document.querySelector("#removeBtn");
var output = document.querySelector("#output");
var count = 0;

// 解除するためには名前付き関数を使用します。
function handleClick() {
	count++;
	output.textContent = count + "回クリックされました";
}

// イベントリスナーを登録します。
btn.addEventListener("click", handleClick);

// 「リスナー解除」ボタンでイベントリスナーを解除します。
removeBtn.addEventListener("click", function() {
	btn.removeEventListener("click", handleClick);
	output.textContent = "リスナーが解除されました";
});

『HTML要素.addEventListener()』で無名関数を使って登録したリスナーは、『HTML要素.removeEventListener()』で解除できません。見た目が同じコードでも、無名関数は毎回別のオブジェクトとして生成されるため、同じ関数の参照とは見なされないためです。

// この書き方では解除できません。
btn.addEventListener("click", function() {
	console.log("クリック");
});

// 同じ内容の関数を指定しても別のオブジェクトのため一致しません。
btn.removeEventListener("click", function() {
	console.log("クリック");
}); // 解除されません。

『HTML要素.removeEventListener()』は登録済みのイベントリスナーを解除するメソッドです。登録時に使用した関数と同じ参照を渡す必要があるため、解除が必要なリスナーは必ず名前付き関数で登録してください。

リスナーを1回だけ実行したい場合は、『HTML要素.removeEventListener()』を使わずに『HTML要素.addEventListener()』の第3引数に『{ once: true }』を指定する方法が簡潔です。

メモリリークを防ぐためにも、不要になったリスナーは適切に解除することが大切です。特にHTML要素がDOMから削除される際に登録済みのリスナーが残っていると、メモリが解放されない場合があります。