HTML要素.removeEventListener()

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

<button id="action-btn">クリック</button>
<button id="remove-btn">解除</button>
<p id="output"></p>
<input id="search" type="text" placeholder="検索">
<p id="search-output"></p>

同じ処理は次のようにも書けます。

// パターン1: removeEventListener() の基本（名前付き関数で登録・解除）
var actionBtn = document.getElementById("action-btn");
var removeBtn = document.getElementById("remove-btn");
var output = document.getElementById("output");
var count = 0;

function handleClick() {
	count++;
	output.textContent = count + "回クリックされました";
}

actionBtn.addEventListener("click", handleClick);

removeBtn.addEventListener("click", function() {
	actionBtn.removeEventListener("click", handleClick); // 同じ関数参照で解除します。
	output.textContent = "リスナーを解除しました。これ以上クリックは反応しません。";
});

// パターン2: 無名関数では解除できない（注意事項）
actionBtn.addEventListener("click", function() {
	console.log("この無名関数は解除できません");
});
// 以下は解除されません。見た目が同じでも別オブジェクトのためです。
// curseBtn.removeEventListener("click", function() { ... }); // 無効
// actionBtn.removeEventListener("click", function() { ... }); // 無効

// パターン3: 一定回数後に自動的にリスナーを解除する
var searchInput = document.getElementById("search");
var searchOutput = document.getElementById("search-output");
var searchCount = 0;

function handleSearch(e) {
	searchCount++;
	searchOutput.textContent = "検索: " + e.target.value + "（" + searchCount + "回目）";
	if (searchCount >= 3) {
		searchInput.removeEventListener("input", handleSearch);
		searchOutput.textContent += " ← 3回の検索後にリスナーを自動解除しました";
	}
}

searchInput.addEventListener("input", handleSearch);

サンプルページはこちら

『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から削除される際に登録済みのリスナーが残っていると、メモリが解放されない場合があります。