JavascriptでaddEventListener()で作成・指定したイベントを削除する方法を紹介しています。

ここで紹介しているremoveEventListener()を使った方法は、イベントの実行停止やキャンセルではなく削除・破棄という処理になります。

削除・破棄したイベントは再度、作成・追加されるまで実行される事はありません。

イベントを削除する実装サンプル

addEventListener()で作成したイベントを削除する動作サンプルとJavascriptのサンプルコードになります。

See the Pen JavaScript hover on class to get id by yochans (@yochans) on CodePen.

HTMLにはテスト用にマウスホバーイベントを指定する<div>タグで設置。

また、イベントを削除するボタンとして<button>タグを作成しています。

<div class="item"></div>
<button class="remove-btn">Remove mouse hover events</button>

addEventListener()で作成・追加したイベントを削除するにはremoveEventListener()を使います。

removeEventListener()を機能させるには、addEventListener()で作成したイベントと同じ「ターゲット」「イベントの種類」「呼び出し関数」を指定する必要があります。

その為、addEventListener()内にて無名関数で処理内容を記述したイベントは削除できませんので注意が必要です。

// イベントを追加
ターゲット.addEventListener(イベントの種類, 呼び出し関数, false);
// イベントを削除
ターゲット.removeEventListener(イベントの種類, 呼び出し関数, false);

マウスホバーイベントにはマウスカーソルが要素内に入った時に実行するmouseover_func()、要素が離れた時に実行するmouseleave_func()というふたつの関数を作成しています。

サンプルではこの2つの関数を指定しているイベントをボタンクリック時にremoveEventListener()で削除しています。

ボタンをクリックした際のイベントにはaddEventListener()で「click」を指定しています。

let mouseover_function = () => {
	event.target.style.background = '#000080';
};

let mouseleave_function = () => {
	event.target.style.background = '#4169e1';
};

// add mouse hover events
document.querySelector(`.item`).addEventListener('mouseover', mouseover_function, false);
document.querySelector(`.item`).addEventListener('mouseleave', mouseleave_function, false);

// Remove mouse hover events
document.querySelector(`.remove-btn`).addEventListener(`click`, () => {
	document.querySelector(`.item`).removeEventListener('mouseover', mouseover_function, false);
	document.querySelector(`.item`).removeEventListener('mouseleave', mouseleave_function, false);
});

無名関数のイベントを削除する

addEventListener()で無名関数を利用した場合removeEventListener()は効きませんが、オプションで{once: true}を指定する事でイベントの実行時にイベントを削除する事は可能です。

下記のサンプルコードの場合、対象要素のクリック時にイベントは一度だけ実行され、その際に削除されますので2回目以降は実行されません。

document.querySelector(`.item`).addEventListener(`click`, () => {
  // 処理
},{once: true});