JavaScriptでイベントハンドラーを削除する方法｜removeEventListener()の使い方を解説
JavaScriptでは、addEventListener()メソッドを使って要素にイベントハンドラーを登録します。一方、登録済みのイベントハンドラーを取り外したい場合には、removeEventListener()メソッドを使用します。このメソッドは、addEventListener()によって追加されたイベントハンドラーだけを削除できる点が特徴です。
イベントハンドラーを削除する際のポイント
removeEventListener()でハンドラーを確実に削除するには、addEventListener()で登録した際と同じ関数への参照を引数に渡す必要があります。そのため、イベント登録用の関数は名前付き関数として定義しておくのが安全です。無名関数（匿名関数）として登録すると参照が一致せず、削除できなくなるので注意しましょう。
サンプルコード
以下の例では、「Hover me」というテキストにマウスオーバーするたびに「1」が表示されるイベントを登録し、ボタンをクリックすることでそのイベントハンドラーを削除します。
<html>
<body>
<h3 id="add">Hover me </h3>
<p id="remove"> </p>
<h3>Click this button to stop hovering effect </h3>
<input type ="button" id="clickIt" onclick="RespondClick()" value ="remove">
<script>
const listener = document.getElementById("add");
listener.addEventListener("mouseover", RespondMouseOver);
function RespondMouseOver() {
document.getElementById("remove").innerHTML += 1+ "</br>";
}
function RespondClick() {
listener.removeEventListener("mouseover", RespondMouseOver);
document.getElementById("remove").innerHTML += 0;
}
</script>
</body>
</html>上記のコードを実行すると、画面には次のように表示されます。
実行結果
「Hover me」というテキスト上にマウスカーソルを乗せるたびに「1」が表示されます。ホバーした回数分だけ「1」が出力され、たとえば4回ホバーすると画面には次のように表示されます。
イベントハンドラーを停止するには、「remove」ボタンをクリックします。ボタンを押すと画面に「0」が表示され、以降はテキスト上にマウスカーソルを乗せても「1」は一切出力されなくなります。
-
クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説
JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。onclickイベントとはonclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、ク
-
JavaScriptでボタンクリック時にli要素を削除する方法
Webアプリケーションでは、リスト項目を動的に削除できるようにしたいケースはよくあります。この記事では、各要素（li）に配置した「削除」ボタンをクリックすることで、該当する要素をJavaScriptだけで削除する方法を解説します。 前提：対象となる順序なしリスト（ul） 例として、次のような順序なしリスト（ul）を想定します。 <ul> <li class="subjectName">JavaScript <button>Remove</button></li> <br> <