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

JavaScriptのremoveEventListener()メソッドでイベントハンドラを削除する方法

JavaScriptでは、removeEventListener()メソッドを使用することで、addEventListener()メソッドで登録したイベントハンドラを削除できます。不要になったイベントリスナーを適切に削除することは、メモリリークの防止やパフォーマンスの維持において重要なテクニックです。

removeEventListener()メソッドの基本

removeEventListener()メソッドには、削除したいイベントの種類（type）と、登録時に使用した関数への参照を引数として渡します。削除を成功させるには、addEventListener()で登録した際と同じ関数の参照を指定する必要があります。匿名関数（無名関数）を直接登録した場合は参照が残らないため、後から削除できません。あらかじめ名前付き関数として定義しておきましょう。

サンプルコード

以下の例では、グレーのボックス上でマウスを動かすたびに、ランダムな数値が表示されます。「削除」ボタンをクリックすると、removeEventListener()によってmousemoveイベントのハンドラが解除され、数値の更新が停止します。

<!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">削除</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>

コードの解説

まず、document.getElementById("box").addEventListener("mousemove", display)により、ボックス要素にmousemoveイベントリスナーを登録しています。イベントが発生するとdisplay()関数が実行され、Math.random()で生成したランダムな数値がpid要素に表示されます。

「削除」ボタンがクリックされるとremoveEvent()関数が呼び出され、removeEventListener("mousemove", display)によって、登録時と同じ関数参照を指定してイベントリスナーを削除します。これにより、以降はマウスを動かしても数値が更新されなくなります。

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

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

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

    JavaScript の removeEventListener() メソッドは、addEventListener() によって要素に登録されたイベントリスナーを削除するためのメソッドです。例えば、ボタンのクリック処理を一定回数だけ有効にしたい場合や、特定の条件を満たした時点でイベント処理を停止したい場合などに活用できます。 基本構文 element.removeEventListener(event, function, useCapture); event：削除対象のイベント名（例：click） function：削除する関数への参照 useCapture：登録時に指定したキャプチャ設