はじめに
今回は、JavaScriptでよく使われるイベントリスナーメソッドについてまとめていきます。どのようなパターンで、どのような場面で活用すればいいか？を書き出しいます。
JavaScriptのメソッドとは
JavaScriptのメソッドとは、オブジェクトに関連づけられた関数のことです。オブジェクトのプロパティとして定義され、オブジェクトのデータを操作するために使われます。オブジェクトや配列、文字列などに組み込まれたメソッドも多く、JavaScriptのコードで頻繁に使用されます。
イベントリスナーメソッドとは
JavaScriptのイベントリスナーのメソッドは、ユーザーの操作やブラウザの動作に応じて特定の関数（イベントハンドラ）を実行するために使用されます。
イベントリスナーの追加
/* イベントリスナーメソッドの基本構文 */
element.addEventListener('イベント名', 関数, オプション);
/* 例題 */
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
- addEventListener() は、指定した要素に対してイベントリスナーを追加するメソッドです。このメソッドを使うことで、特定のイベントが発生したときにコールバック関数を実行できます。
- element:は、イベントを設定する対象の要素（例: ボタン、リンク、ウィンドウなどのDOM要素）を指し、イベント名: 'click' や 'scroll'など、発生したイベントの種類を指定します。
- 関数: イベントが発生したときに実行するコールバック関数で、オプション: （任意）イベントの動作に関する設定。例えば capture: trueなど。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
- イベントリスナーは、ページが読み込まれてから動作するため、通常はJavaScriptがDOMContentLoadedもしくは window.onload のイベント内で実行されます。
addEventListener() は1つの要素に対して複数のイベントリスナーを追加できます。
イベントリスナーを削除
/* イベントリスナーを削除するメソッド */
element.removeEventListener('イベント名', 関数, オプション);
/* 例題 */
function showAlert() {
alert('Button clicked!');
}
const button = document.getElementById('myButton');
// イベントリスナーを追加
button.addEventListener('click', showAlert);
// イベントリスナーを削除
button.removeEventListener('click', showAlert);
- 削除するためには、addEventListener()に渡したのと同じ関数を removeEventListener()に渡す必要があります。匿名関数（function() { ... } など）を使った場合、その関数を後から削除することができません。
イベントリスナーのオプションについて
JavaScriptのイベントリスナーには、addEventListenerメソッドを使ってイベントを監視できます。このメソッドの第3引数としてオプションを指定することができます。
capture（デフォルト: false）
- イベントが「キャプチャリングフェーズ」で検出されるかどうかを指定します。通常、イベントはバブリング（子要素から親要素へ伝播）しますが、true に設定すると、親要素から子要素へと伝播するキャプチャリングフェーズでイベントが検出されます。
once（デフォルト: false）
- trueに設定すると、イベントリスナーが一度だけ呼び出された後に自動的に削除されます。
passive（デフォルト: false）
- trueに設定すると、イベントハンドラが preventDefault() を呼び出せなくなります。主にスクロールイベントなどのパフォーマンス向上のために使われます。
/* 例題 */
element.addEventListener('click', event => {
console.log('Clicked!');
}, { capture: false, once: true, passive: false });
この例では、クリックイベントがバブリングフェーズで検出され、一度だけ実行されます。これらのオプションを活用することで、より柔軟なイベント管理が可能になります。
まとめ
- addEventListener()は、イベントリスナーを追加し、特定のアクションが行われたときに関数を実行するために使います。
- removeEventListener()は、addEventListener()で追加されたリスナーを削除するためのメソッドです。