addEventListener()の使い方

はじめに

クライアントJavaScriptでは、ブラウザ（window）操作・ドキュメント操作（DOM操作)・イベント・HTTP操作がある。
その中でもイベントハンドラはブラウザで起こったイベントが発生した時に実行される関数である。イベントハンドラを登録するには、以下の3つの方法がある。

1. 要素の属性に設定する。
2. DOM要素のイベントハンドラプロパティに設定する。
3. addEventListener()メソッドを使用

今回は３番目のaddEventListener()について、アウトプットする。

addEventListener()メソッドとは

addEventListener()メソッドを使用することで、イベントオブジェクトを使用して、さまざまな処理を記述できる。
基本的には、以下のような構文で使用する。

DOMオブジェクト.addEventListener("イベントの種類", 処理(関数))

第1引数にイベントの種類を指定することで、このイベントがどのようなケースに対応するのかを特定。第2引数に関数を指定することで、任意のイベントが発生した時に関数内に書かれた処理を実行できる。

イベントには、以下のような種類がある。

3種類の関数設定方法について

「addEventListener()」を記述する方法として、3種類の関数を設定する書き方があるのでまとめて解説する！　

外部の関数を設定する方法

対象要素.addEventListener(種類, sampleEvent);

function sampleEvent() {

  //ここに処理を記述する
  
}

無名関数を設定する方法

対象要素.addEventListener(種類, function() {
 
 //ここに処理を記述する
 
}); 

アロー関数を設定する方法

対象要素.addEventListener(種類, () => {
  
  //ここに処理を記述する
  
}); 

イベント処理の上書きについて

「addEventListener()」には大きな特徴が1つあります。それは、イベント処理が上書きされない。

addEventListener()を使ったイベント処理は、複数のイベントを追加することで同時に実行できる。