【JavaScript】イベント処理関数addEventListener()の使い方、引数の使い方

addEventListener()は、JavaScriptでイベントリスナーを追加するためのメソッドです。イベントリスナーとは、特定のイベントが発生した際に呼び出される関数であり、ユーザーのアクションやWebページの状態の変化など、様々なイベントに対してリアクションを定義することができます。

addEventListener()関数の基本的な構文は以下のようになります。

element.addEventListener(event, function, useCapture);

各引数の説明を簡単に以下に示します。

イベントリスナーとは？

イベントリスナーは、JavaScriptで定義された関数で、特定のイベントが発生したときに呼び出されます。イベントとは、ユーザーの操作（クリックやマウスオーバーなど）やWebページの状態の変化（ページの読み込み完了など）など、様々な状況を指します。

また、イベントリスナーはaddEventListener()メソッドを使用して要素に追加されます。イベントが発生すると、イベントリスナーが呼び出され、指定された処理を実行します。イベントリスナーは、JavaScriptによって動的に変更や削除ができます。

Webページにインタラクティブな機能を追加する際に非常に重要です。例えば、ボタンがクリックされた場合にフォームを送信するなど、ユーザーが操作した場合に迅速かつ正確に反応する必要がある場合に利用されます。

addEventListener()の引数について

先ほど挙げた基本構文を見て見ましょう。

element.addEventListener(event, function, useCapture);

addEventListener()は、以下の3つの引数を取ります。

1. イベントタイプ（event）
   イベントの種類を指定します。例えば、”click“や”mouseover“などが挙げられます。複数のイベントタイプを指定することもできます。
2. コールバック関数（function）
   イベントが発生した時に実行される関数を指定します。この関数は、イベントオブジェクトを引数として受け取ることができます。イベントオブジェクトには、イベントに関する情報（発生した要素、クリック位置、押されたキーなど）が含まれています。
3. useCapture（省略可能）
   オプションの引数であり、イベントがキャプチャフェーズで処理されるかどうかを指定します。デフォルトはfalseで、バブリングフェーズで処理されます。useCaptureをtrueにすると、イベントがキャプチャフェーズで処理されます。※詳細は後程。

例えば、以下のようにaddEventListener()を使って、クリックされたときにアラートダイアログを表示する関数を登録できます。

const button = document.querySelector('button');

button.addEventListener('click', function(event) {
  alert('ボタンがクリックされました！');
});

この例では、最初の引数に’click‘というイベントタイプを指定し、2番目の引数にクリックされたときに実行するコールバック関数を指定しています。

function(event)については『JavaScriptにおけるイベントオブジェクトとは何か？初心者にも分かりやすく解説【function(event)】』に記してありますので併せてご参照ください。

皆さんの謎「useCapture」について

addEventListener()関数のuseCapture引数は、イベントの伝播（イベントフロー）におけるイベントキャプチャーフェーズの使用有無を指定するための引数です。イベントキャプチャーフェーズとは、イベントが発生した要素からルート要素までの階層を順にたどりながら、親から子へとイベントが伝播するフェーズです。

useCapture引数の値によって、イベントリスナー関数がどのフェーズで呼び出されるかが変わります。useCapture引数がtrueの場合は、イベントキャプチャーフェーズでイベントリスナー関数が呼び出され、falseの場合はイベントバブリングフェーズで呼び出されます。イベントバブリングフェーズは、イベントが発生した要素からルート要素までの階層を逆順にたどりながら、子から親へとイベントが伝播するフェーズです。

以下は、useCapture引数を使用して、イベントキャプチャーフェーズでリスナー関数を呼び出す例です。

<div id="wrap">
  <div id="inner">
    <button id="myButton">Click me</button>
  </div>
</div>

<script>
const wrap = document.querySelector('#wrap');
const btn = document.querySelector('#myButton');

wrap.addEventListener('click', () => {
  console.log('Outer clicked!');
}, true);

btn.addEventListener('click', () => {
  console.log('Button clicked!');
}, false);
</script>

この例では、idが「wrap」の要素（#wrap）にイベントキャプチャーフェーズ（true）のリスナー関数を追加しています。また、idが「myButton」のボタン要素（#myButton）には、イベントバブリングフェーズ（false）のリスナー関数を追加しています。

ボタンをクリックすると、「Button clicked!」というメッセージが表示されます。また、ボタンの親要素のdiv要素をクリックすると、「Outer clicked!」というメッセージが表示されます。ただし、イベントキャプチャーフェーズ（true）でリスナー関数を呼び出しているため、先に「Outer clicked!」というメッセージが表示されます。

なお、useCapture引数を省略（何も書かない）すると、デフォルト値であるfalseが設定されまるので、ボタンをクリックしてもOuterを押したというイベント処理は行われず、コンソールには「Button clicked!」しか表示されないということですね。なんとなくお分かりいただけましたでしょうか。

イベントタイプの一覧表（主要一部）

avaScriptで扱えるイベントの一部を以下に示します。

注意：イベントリスナーは上書きが出来る

JavaScriptにおけるイベント処理の上書きとは、同一のイベントに対して複数のイベントリスナーが設定された場合に、後から設定されたリスナーが先に設定されたリスナーを上書きすることを指します。

たとえば、以下のように2つのイベントリスナーが設定された場合を考えてみます。

const btn = document.querySelector('#myButton');

btn.addEventListener('click', () => {
  console.log('First listener');
});

btn.addEventListener('click', () => {
  console.log('Second listener');
});

この場合、ボタンがクリックされたときには、First listenerとSecond listenerの両方がコンソールに出力されます。

しかし、以下のように2つ目のリスナーを上書きするコードを追加すると、Second listenerが実行され、First listenerは実行されなくなります。

btn.addEventListener('click', () => {
  console.log('Second listener overwrites the first listener');
});

つまり、同じイベントに対して複数のイベントリスナーを設定する場合は、注意してどのような順序で設定されているかを確認し、必要に応じて上書きを避けるようにします。

まとめ

・基本構文を頭に叩き込みましょう。

element.addEventListener(event, function, useCapture);

・イベントタイプは色々存在するので、その時に応じて使い分けましょう。また、ブラウザによって挙動が変わるイベントタイプも存在するので注意してください。
イベントタイプについては下記を参照すると良いでしょう。
（参考：https://developer.mozilla.org/en-US/docs/Web/Events#event_listing）←めちゃくちゃあるので本当に暇なとき読むと勉強になりますね。

・イベントキャプチャーフェーズとイベントバブリングフェーズについても押さえておくと良い。