JavaScriptで一度設定した「イベントリスナー」を削除するremoveEventListener()メソッドの使い方

2020-09-01 2020-11-09

イベントリスナーの削除を行うremoveEventListener()メソッド

removeEventListener()メソッドを使うと、一度定義したイベントリスナーを削除できます。

注意点が2つあり・・・

関数名を指定する(アロー関数は不可)
addEventListener()メソッドの引数(オプション含めて)同じ引数を指定する

これらの条件を満たさないと削除されません。

メソッド

メソッド	意味
イベントターゲット.removeEventListener(イベント名,リスナー,[オプション])	イベントリスナーの削除

サンプルコード

Output

ページ読み込みご5秒以内しか機能しないアラート

Pug

p ページ読み込みご5秒以内しか機能しないアラート
 button#button.mb-4 Button

HTML

<p>ページ読み込みご5秒以内しか機能しないアラート</p>
  <button class="mb-4" id="button">Button</button>

SCSS

#button {
	--background-color: #fff;
	--color: #576574;
	--transition: all 0.3s;
	margin-bottom: 10px;
	background-color: var(--background-color);
	padding: 10px;
	color: var(--color);
	border: 1px solid #576574;
	cursor: pointer;
	width: 120px;
	transition: var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}

CSS

#button {
  --background-color: #fff;
  --color: #576574;
  --transition: all 0.3s;
  margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
  border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
  transition: var(--transition);
}
#button:hover {
  transition: var(--transition);
  color: var(--background-color);
  background-color: var(--color);
}

JavaScript

const targetEvent = document.getElementById('button');
// ボタンをクリックしたら予め用意していたonClickAction()関数を実行する
const onClickOption = {
	capture: true,
	once: false,
	passive: true
};
targetEvent.addEventListener('click', onClickAction, onClickOption);

/** ボタンをクリックするとアラートを表示 */
function onClickAction() {
	//アラートを表示
	const dateInstance = new Date();
	window.alert(`こんにちは！今日の日付は${dateInstance.getFullYear()}年${dateInstance.getMonth() + 1}月${dateInstance.getDate()}日です。`);
}

/*しかし、ページ読み込みから5秒後以降はアラートを表示できない*/
setTimeout(() => {
	targetEvent.removeEventListener('click', onClickAction, onClickOption);
}, 5000);

前のレッスン

コースへ戻る

次のレッスン

投稿者