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

JavaScriptでイベントリスナーを削除する方法｜removeEventListener()の使い方を解説

JavaScriptで addEventListener() メソッドを使って登録したイベントハンドラを削除するには、removeEventListener() メソッドを使用します。不要になったイベント処理を解除できるため、パフォーマンスの向上やメモリリークの防止にも役立ちます。

基本構文

element.removeEventListener(event, function, useCapture);

第1引数にはイベント名（例："mousemove"）、第2引数には削除したい関数への参照、第3引数には登録時に指定したキャプチャ設定（省略可能）を渡します。

サンプルコード

次の例では、ボックス上でマウスが動くたびに乱数を表示するイベントハンドラを登録し、「Remove」ボタンをクリックするとそのイベントハンドラを削除します。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            background-color: gray;
            border: 2px dashed;
         }
      </style>
   </head>
   <body>
      <div id="box">デモテキスト
         <p>下のボタンをクリックするとイベントハンドラが削除されます。</p>
         <button onclick="removeEvent()" id="btnid">Remove</button>
      </div>
      <p id="pid"> </p>
      <script>
         document.getElementById("box").addEventListener("mousemove", display);
         function display() {
            document.getElementById("pid").innerHTML = Math.random();
         }
         function removeEvent() {
            document.getElementById("box").removeEventListener("mousemove", display);
         }
      </script>
   </body>
</html>

動作の流れ

  • ページ読み込み時に、addEventListener("mousemove", display) によってdiv要素にマウス移動イベントが登録されます。
  • ボックス上でマウスを動かすと display() 関数が実行され、ランダムな数値が表示されます。
  • 「Remove」ボタンをクリックすると removeEventListener("mousemove", display) が呼び出され、イベントハンドラが削除されます。
  • 削除後はマウスを動かしても数値が更新されなくなります。

使用時の注意点

  • 同じ関数の参照を指定する： 登録時と削除時で、同一の関数オブジェクトを指定する必要があります。
  • 無名関数は削除できない： addEventListener() に直接渡した無名関数は参照が残らないため、後から削除できません。削除する可能性があるリスナーは、名前付き関数として定義しましょう。
  • captureオプションを揃える： 登録時に第3引数へ true を指定した場合は、削除時も同じ値を指定する必要があります。

まとめ

イベントリスナーの削除には removeEventListener() を使用し、登録時と同じイベント名・関数参照・キャプチャ設定を指定することが重要です。特に無名関数は削除できないため、後で解除する予定があるリスナーは必ず名前付き関数として定義しておくと安心です。

  1. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>  

  2. JavaScriptで要素からクラス名を削除する方法【classList.remove()の使い方】

    JavaScriptでHTML要素からクラス名（className）を削除するには、classList.remove()メソッドを使うのが最もシンプルで確実な方法です。このメソッドを使えば、対象の要素から指定したクラスを動的に取り除くことができ、ボタンのクリックなどユーザーの操作に応じてスタイルを切り替える際に非常に便利です。 サンプルコード 以下は、「Remove Class」ボタンをクリックすると、DIV要素からクラス名が削除される例です。 <!DOCTYPE html> <html> <head> <meta name="viewpor