addEventListenerとは？
addEventListener()は、JavaScriptでHTML要素にイベントリスナー（イベントハンドラー）を登録するためのメソッドです。
ユーザーがボタンをクリックしたり、キーボードを押したり、マウスを移動したりしたときなど、特定のイベントが発生したタイミングで指定した関数を実行できます。
現在のJavaScriptでは、イベントを登録する方法としてaddEventListener()が標準的に使用されています。
addEventListenerの基本的な使い方
addEventListener()は、次の構文で使用します。
element.addEventListener("イベント名", 関数, オプション);
各引数には次の意味があります。
- イベント名：
"click"、"keydown"、"input"など、監視するイベントを指定します。 - 関数：イベントが発生したときに実行される処理です。
- オプション：イベントの動作を制御する設定です（省略可能）。
クリックイベントを追加する例
const button = document.querySelector("button");
button.addEventListener("click", function () {
alert("ボタンがクリックされました！");
});
このコードでは、ボタンがクリックされるたびにアラートが表示されます。
処理の流れは次のようになります。
- ボタン要素を取得する。
clickイベントを登録する。- クリックされると登録した関数が実行される。
removeEventListenerとは？
removeEventListener()は、addEventListener()で登録したイベントリスナーを削除するためのメソッドです。
不要になったイベントを解除することで、不要な処理の実行やメモリの消費を防ぐことができます。
removeEventListenerの基本的な使い方
element.removeEventListener("イベント名", 関数, オプション);
なお、削除するには登録時と同じ関数オブジェクトを指定する必要があります。
イベントリスナーの削除例
const button = document.querySelector("button");
function handleClick() {
alert("ボタンがクリックされました！");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);
この例では、登録したクリックイベントを後から削除しています。
無名関数では削除できない点に注意
初心者が特につまずきやすい点として、無名関数で登録したイベントは後から削除できません。
// 登録
button.addEventListener("click", function () {
alert("クリック");
});
// 削除できない
button.removeEventListener("click", function () {
alert("クリック");
});
このコードでは、見た目は同じですが別の関数として扱われるため、イベントは削除されません。
削除する予定がある場合は、関数を変数や関数名として定義しておきましょう。
イベントリスナーの管理
イベントリスナーを適切に管理することは、Webアプリケーションのパフォーマンス向上につながります。
特に、動的に作成・削除される要素では、不要になったイベントリスナーを解除することが重要です。
一度だけ実行する例
const button = document.querySelector("button");
function handleClick() {
alert("ボタンがクリックされました！");
button.removeEventListener("click", handleClick);
}
button.addEventListener("click", handleClick);
このコードでは、最初のクリックだけイベントが実行されます。
addEventListener()のオプション
addEventListener()の第3引数にはオプションを指定できます。
| オプション | 説明 |
|---|---|
once |
一度だけイベントを実行する。 |
capture |
キャプチャリングフェーズでイベントを処理する。 |
passive |
スクロールなどの処理を高速化するため、preventDefault()を使用しないことをブラウザへ伝える。 |
onceオプションの例
const button = document.querySelector("button");
function handleClick() {
alert("ボタンがクリックされました！");
}
button.addEventListener("click", handleClick, {
once: true
});
この場合、イベントは自動的に削除されるため、removeEventListener()を呼び出す必要はありません。
addEventListener()とonclickの違い
イベント登録にはonclickを使う方法もありますが、現在はaddEventListener()の利用が推奨されています。
| 方法 | 特徴 |
|---|---|
onclick |
イベントを1つしか登録できない。 |
addEventListener() |
複数のイベントリスナーを登録でき、削除やオプション指定にも対応している。 |
addEventListenerとremoveEventListenerの違い
| メソッド | 役割 |
|---|---|
addEventListener() |
イベントリスナーを追加する。 |
removeEventListener() |
登録済みのイベントリスナーを削除する。 |
まとめ
addEventListener()はイベントを登録するための標準的なメソッドである。removeEventListener()は登録済みのイベントを削除する。- 削除するには登録時と同じ関数を指定する必要がある。
onceオプションを使うと一度だけ実行できる。- 現在は
onclickよりもaddEventListener()の使用が推奨されている。