導入: なぜaddEventListenerが重要なのか
現代のフロントエンド開発において、ユーザーの操作（クリック、スクロール、キー入力など）を検知し、適切な処理を実行する仕組みは不可欠です。かつて使われていた「onclick属性」のようなインラインイベントハンドラと異なり、addEventListenerを使用することで、HTMLとJavaScriptを分離し、一つのイベントに対して複数の処理を登録できるなど、保守性の高いコードを実現できます。本記事では、このAPIの基礎から実務で役立つテクニックまでを解説します。
基礎知識: イベントフローとaddEventListenerの仕組み
addEventListenerは、特定のイベントが発生した際に実行する関数（イベントリスナー）を対象の要素に追加するメソッドです。
仕組みを理解する上で重要なのが「イベント伝播（Event Propagation）」です。イベントは「キャプチャリングフェーズ（親から子へ）」と「バブリングフェーズ（子から親へ）」の2段階で伝わります。通常はデフォルトのバブリングを利用しますが、必要に応じて第3引数で制御することが可能です。
実装/解決策: 基本的な使い方とオプション
基本的な構文は「element.addEventListener(type, listener, options)」です。
特に重要なのが第3引数の「options」オブジェクトです。
・capture: trueにするとキャプチャリングフェーズで実行されます。
・once: trueにすると、一度実行された後に自動的にリスナーが削除されます。
・passive: trueにすると、スクロールイベントなどのパフォーマンスを向上させることができます。
サンプルプログラム: 実践的なイベント登録とメモリ管理
以下は、ボタンクリック時に一度だけ処理を実行し、メモリリークを防ぐためにリスナーを解除する実務的な実装例です。
応用・注意点: 現場で陥りやすい罠
実務で特に注意すべき点は以下の2つです。
1. メモリリークの回避:
ReactやVueのようなフレームワークを使わずVanilla JSでSPAを構築する場合、コンポーネントの破棄時に必ずremoveEventListenerでリスナーを削除してください。放置すると不要なイベントが残り続け、ブラウザのメモリを圧迫します。
2. passiveイベントの活用:
スクロールやタッチイベント（wheel, touchstartなど）で重い処理を行うと、ブラウザのレンダリングがブロックされ、カクつきの原因になります。これらには必ず { passive: true } を付与することで、ブラウザに「このイベント内でpreventDefaultは呼び出さない」と伝え、スクロールのパフォーマンスを劇的に改善できます。
これらを意識するだけで、イベント管理の質が一段階上がり、より堅牢なフロントエンドアプリケーションを構築できるようになります。