event listener

[ˈɪvɛnt ˈlɪsənər] イベント リスナー

1. イベントが発生した際に、そのイベントに対応する処理を実行するための仕組み。

Web開発などで、ユーザーの操作（クリック、マウスオーバーなど）や、ブラウザからの通知（ページの読み込み完了など）といった特定の「イベント」が発生したときに、あらかじめ登録しておいた「処理（関数）」を実行する仕組みのことです。これにより、ユーザーのインタラクションに動的に応答するウェブページを作成できます。

element.addEventListener('click', function() { alert('Button clicked!'); }); (要素にクリックイベントリスナーを追加し、ボタンがクリックされたときに「Button clicked!」というアラートを表示します。)

• addEventListener: イベントリスナーを追加するという意味です。
• ('click',: クリックイベントを捕捉することを意味します。
• function() {: イベントが発生した際に実行される処理の開始を示します。
• alert('Button clicked!');: ボタンがクリックされたときに「Button clicked!」というアラートを表示するという処理内容です。
• });: 処理の終了を示します。

element.removeEventListener('mouseover', highlight); (要素のマウスオーバーイベントリスナーを削除し、ハイライト処理を実行しないようにします。)

• removeEventListener: イベントリスナーを削除するという意味です。
• ('mouseover',: マウスオーバーイベントを捕捉することを意味します。
• highlight);: イベント発生時にハイライト処理を実行するという意味です。

document.addEventListener('keydown', handleKeyPress); (ドキュメント全体にキーボードイベントリスナーを追加し、キーが押されたときにキー操作を処理します。)

• document.addEventListener: ドキュメント全体にイベントリスナーを追加するという意味です。
• ('keydown',: キーボードのキーが押されたイベントを捕捉することを意味します。
• handleKeyPress);: キー入力があった際にキー操作を処理するという意味です。

関連

• addEventListener
• removeEventListener
• event handler
• callback function
• DOM events