【JavaScript】イベントリスナーを削除する【removeEventListener】

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで設定したイベントリスナーを削除する方法をご紹介しています。

上記の疑問にお答えしています。

では、解説していきます。

removeEventListenerでイベントリスナーを削除する

イベントリスナーの削除にはremoveEventListenerというメソッドを使用します。addEventListenerで登録したイベントリスナーや登録済みのイベントリスナーを削除することができます。

removeEventListenerの構文は下記の通り。引数はaddEventListenerと同様にoptionとuseCaptureを指定することができます。

構文

target.removeEventListener(type, listener[, options]);

target.removeEventListener(type, listener[, useCapture]);

※useCaptureの詳細については、下記のリンクをご参照ください！

removeEventListenerで登録したイベントリスナーを削除できることがわかりました。では実際に登録したイベントリスナーが削除できるか検証していきます。

イベントリスナーを削除する

検証のためにイベントリスナーを登録します。ボタンをクリックするとアラートが表示される処理を作成します。HTMLで作成した要素にクリックイベントを登録してみます。

HTML

<button id="btn">Click Me!</button>

JS

let btn = document.getElementById('btn');

const onClick = ()=> {

    alert('クリックされました！');

}

btn.addEventListener('click', onClick, false);

下記は動作確認用のデモになります。ボタンをクリックすると元気なメッセージのアラートが表示されるかと思います。

See the Pen
6066-1 by ryohei (@intotheprogram)
on CodePen.

ちゃんとイベントリスナーが登録されていますね！クリックすると関数が呼び出されてブラウザ上にアラートが表示されています。

では、今度は登録したイベントリスナーを削除してみます。登録した直後にイベントリスナーを削除するように下記を追記します。

btn.removeEventListener('click', onClick, false);

動作確認。果たしてイベントリスナーは削除されているでしょうか。ボタンをクリックしてアラートが表示されるかどうか……。

いざ実行です！

See the Pen
6066-2 by ryohei (@intotheprogram)
on CodePen.

ボタンをクリックしてもアラートは表示されませんね。きちんとイベントリスナーが削除されています。万歳！これでいつでもイベントリスナーを削除することができるようになりますね。

最後に

登録したイベントリスナーを削除したいケースは多々あります。1回だけ実行する、ある処理中だけ削除して処理が終わったら再登録する、など使用できる場面は様々です。ぜひ使い方をマスターしてくださいね！

以上、JavaScriptでイベントリスナーを削除するremoveEventListenerメソッドのご紹介でした！