【JavaScript】addEventListenerのイベント15選と使用例

JavaScriptにおけるaddEventListenerは、webページ上でのユーザーアクションに対応するためには欠かせないメソッドで、さまざまなイベント処理を実行することができます。この記事では、addEventListenerにおける様々なイベントの使い方を紹介します！

addEventListenerの概要

addEventListenerは、ボタンがクリックされたときに何かを実行したい場合や、特定の要素にマウスが乗ったときに反応させたい場合など、様々なユーザーのアクションに対して柔軟に反応できる処理を行うことができます。

JavaScriptでイベントハンドリング（ユーザーの操作やページの変化に対する対応）を行うための主要なメソッドとして、利用頻度の多い処理です。

addEventListenerの基本構文

まずは基本となる「addEventListener()」の構文です。基本的には、イベントの「種類」と、処理を実行するための「関数」を指定することになります。

element.addEventListener(type, listener, options)

引数

• element
  イベントリスナーを追加する対象の要素を指定します。
• type
  イベントの種類を指定します。例えば、’click’や’mouseover’などがあります。
• listener
  イベントが発生した際に呼び出される関数（コールバック関数）を記述します。
• options (省略可能)
  オプションのオブジェクトで、イベントの挙動を細かく制御するためのプロパティを記述できます。

addEventListenerの主なイベント

addEventListenerでは、さまざまな種類のイベントに対応することができます。以下、よく利用するイベントとして15個紹介します。

click

要素上でマウスのボタンがクリックされた瞬間に発生します。クリックはボタンを押して離す動作までを指します。通常、ボタンをクリックすると、このイベントがトリガーされます。

const button = document.getElementById('myButton');
button.addEventListener('click', function(event) {
  // クリック時の処理
});

dblclick

要素上でマウスのボタンがダブルクリックされた瞬間に発生します。通常、このイベントはダブルクリックに反応するように設定された要素で使用されます。

const button = document.getElementById('myElement');
button.addEventListener('dblclick', function(event) {
  // ダブルクリック時の処理
});

mousedown

マウスボタンが要素上で押される瞬間に発生します。このイベントはボタンが押された瞬間に一度だけ発生します。

const box = document.getElementById('myBox');
box.addEventListener('mousedown', function() {
  // マウスが要素上で押されたときの処理
});

mouseup

マウスボタンが要素上から離された瞬間に発生します。このイベントはボタンが離された瞬間に一度だけ発生します。

const box = document.getElementById('myBox');
box.addEventListener('mouseup', function() {
  // マウスが要素上から離されたときの処理
});

mousemove

マウスが要素上で移動する度に発生します。ユーザーがマウスを動かすたびに一連の mousemove イベントが発生します。

const element = document.getElementById('myElement');
element.addEventListener('mousemove', function(event) {
  // マウスが要素上で移動しているときの処理
});

mouseover

マウスが要素に乗った瞬間に発生します。ただし、子要素から親要素に移動する際は mouseover は発生しません。

const element = document.getElementById('myElement');
element.addEventListener('mouseover', function(event) {
  // マウスが要素に乗ったときの処理
});

mouseout

マウスが要素から離れた瞬間に発生します。ただし、子要素から親要素に移動する際は mouseout は発生しません。

const element = document.getElementById('myElement');
element.addEventListener('mouseout', function(event) {
  // マウスが要素から離れたときの処理
});

keydown

キーボードのキーが押された瞬間に発生します。このイベントはキーが押された瞬間に一度だけ発生します。

document.addEventListener('keydown', function(event) {
  // キーが押された瞬間の処理
});

keyup

キーボードのキーが離された瞬間に発生します。このイベントはキーが離された瞬間に一度だけ発生します。

document.addEventListener('keyup', function(event) {
  // キーが離れた瞬間の処理
});

focus

要素がフォーカスを受け取った瞬間に発生します。

const inputField = document.getElementById('myInput');
inputField.addEventListener('focus', function(event) {
  // 入力フィールドがフォーカスを得たときの処理
});

詳細

• focus イベントは、ユーザーが対話的な要素に焦点を当てた際に、その要素に設定されたリスナーが呼び出されます。 例えば、テキストボックスに入力するときやボタンをクリックするときに focus イベントが発生します。
• フォーム要素などでは focus イベントを利用して入力フォーカスが当たったときに特定の処理（例: ヒントの表示、スタイルの変更）を行うことがあります。

blur

focusイベントとは逆に対象がフォーカスを失ったときに発生します。

const inputField = document.getElementById('myInput');
inputField.addEventListener('blur', function(event) {
  // 入力フィールドがフォーカスを失ったときの処理
});

詳細

• ユーザーがテキストボックスから別の場所に移動したり、他の要素をクリックしたりしたときに blur イベントが発生します。
• フォーカスが外れたときに特定の処理を行う場合に使用されます。 例えば、入力フィールドからフォーカスが外れたときに入力値の検証を行ったり、特定のエフェクトを適用することがあります。

submit

フォームが送信されたときに発生します。

const form = document.getElementById('myForm');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // フォームのデフォルトの送信を防止
  // フォームが送信されたときの処理
});

詳細

• submit イベントは通常、フォーム内のボタンがクリックされるかEnterキーが押されたときに発生します。
• 通常、フォームの送信後にページがリロードされるデフォルトの動作を防ぐために event.preventDefault() が使用されます。これにより、JavaScriptでフォームの送信処理を制御できます。

change

フォーム要素（テキストボックス、セレクトボックス、チェックボックスなど）の値が変更された時に発生します。

const inputField = document.getElementById('myInput');
inputField.addEventListener('change', function(event) {
  // フォーム要素の値が変更されたときの処理
});

詳細

• change イベントは、テキストボックスに新しいテキストが入力されたときや、セレクトボックスから異なるオプションが選択されたときに発生します。
• change イベントは、テキストボックスやセレクトボックスなどのフォーム要素でよく利用されます。ただし、即座にイベントが発生するわけではなく、要素からフォーカスが外れたときに発生します。

load

ページや画像が完全に読み込まれたときに発生します。

window.addEventListener('load', function() {
  // ページのロードが完了したときの処理
});

詳細

• load イベントは、ページ全体または個別の要素（画像など）が完全に読み込まれ、レンダリングされたときに発生します。
• 通常は、ページが読み込まれた後に行いたい初期化や処理がある場合に利用されます。 例えば、外部のリソースが読み込まれてから特定のスクリプトを実行するなど。

scroll

ページ全体または特定の要素がスクロールされたときに発生します。

const element = document.getElementById('myElement');
element.addEventListener('scroll', function(event) {
  // 要素がスクロールされたときの処理
});

詳細

• スクロールバーが上下に移動したり、スクロールイベントを発生させる要素が特定の範囲内でスクロールされたときに発生します。
• scrollイベントは、ユーザーがページの特定のセクションに到達したときや、要素がビューポート内に表示されるときに特定の処理を行いたい場合に有用です。

最後に – 参考ページ

いかがでしょうか。

JavaScriptのイベントリスナーは動的なwebページやアプリケーションを構築するには不可欠な機能です。イベントの種類や使い方について深く学び、よりクオリティの高いクリエイティブ制作を実現してみましょう！

参考ページ：EventTarget: addEventListener() メソッド – Web API | MDN