こんにちは、ryohei(@ityryohei)です!

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

ある処理の後にイベントリスナーを削除したいんだけど、どうすればいいの?

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

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

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

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

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

構文

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メソッドのご紹介でした!