JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのremoveEventListener()メソッドの使い方とサンプルコード解説

JavaScript の removeEventListener() メソッドは、addEventListener() によって要素に登録されたイベントリスナーを削除するためのメソッドです。例えば、ボタンのクリック処理を一定回数だけ有効にしたい場合や、特定の条件を満たした時点でイベント処理を停止したい場合などに活用できます。

基本構文

element.removeEventListener(event, function, useCapture);
  • event：削除対象のイベント名（例：'click'）
  • function：削除する関数への参照
  • useCapture：登録時に指定したキャプチャ設定（省略可能）

リスナーを削除するには、addEventListener() で登録したときと同一の関数参照を指定する必要があります。そのため、後から削除する可能性があるリスナーは、無名関数ではなく名前付き関数として定義しておくのがポイントです。

サンプルコード

以下は、removeEventListener() メソッドの動作を確認できるコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript removeEventListener() メソッド</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample {
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript removeEventListener() メソッド</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると数値が表示されます</h3>
<button class="Btn">Remove event Listener</button>
<h3>上のボタンをクリックすると、最初のボタンのイベントリスナーが削除されます</h3>
<script>
    let sampleEle = document.querySelector('.sample');
    let j = 0;
    function printNum(){
        sampleEle.innerHTML += 'Number = ' + j++ + '<br>';
    }
    document.querySelector('.Btn').addEventListener('click', printNum);
    document.querySelectorAll('.Btn')[1].addEventListener('click', () => {
        document.querySelector('.Btn').removeEventListener('click', printNum);
        sampleEle.innerHTML = 'イベントリスナーが削除されました';
    })
</script>
</body>
</html>

コードの解説

  • printNum() 関数は、クリックされるたびに .sample 要素へ連番の数字を出力します。
  • 1つ目のボタンには、printNum 関数が click イベントリスナーとして登録されています。
  • 2つ目のボタンをクリックすると、removeEventListener('click', printNum) によって1つ目のボタンからリスナーが削除され、完了メッセージが表示されます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptのremoveEventListener()メソッドの使い方とサンプルコード解説

「CLICK HERE」ボタンを3回クリックすると、クリックのたびに番号が出力されていきます。

JavaScriptのremoveEventListener()メソッドの使い方とサンプルコード解説

続いて「Remove event Listener」ボタンをクリックしてから、再度「CLICK HERE」ボタンを押しても、それ以上数字は追加されません。これにより、イベントリスナーが正しく削除されたことが確認できます。

JavaScriptのremoveEventListener()メソッドの使い方とサンプルコード解説

まとめ

removeEventListener() を使えば、不要になったイベント処理を動的に解除でき、メモリリークの防止やパフォーマンスの向上にもつながります。削除時は「登録時と同じ関数参照」を指定することが重要なポイントです。

  1. JavaScriptでボタンクリック時にli要素を削除する方法

    Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <

  2. JavaScriptでボタンクリック時に名前を追加・削除する方法をわかりやすく解説

    要素を新しく作成するには add() メソッドを使用し、作成・追加済みの要素を削除するには remove() メソッドを使用します。本記事では、テキストボックスに入力した名前をボタンクリックでリストに追加し、各項目の「Remove Name」ボタンで削除できるシンプルなアプリを例に、その実装方法を解説します。 実装例（サンプルコード） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view