【javascript】addEventListenerの使い方と基本｜初心者向け講座

javascript_addEventListenerの使い方

addEventListenerとは？

特定のイベントが発生したときに実行される関数を登録するメソッドのことです。

「対象の要素」に「何かをきっかけ」にして「動きをつける」ときに使うよ！

基本構文は次の通りです。

element.addEventListener( event , handler , options );

element : 対象の要素（DOM要素）
event : 動くきっかけ（イベントの種類）例：クリック、マウスオーバーなど
handler : 動き（処理をまとめた関数）
options : オプションのオブジェクトまたはブール値

動くきっかけとなるイベントには「ボタンのクリック」、「マウスオーバー」などがあり、それぞれのイベント発生時に実行したい処理を関数として登録します。

この記事では、addEventListenerメソッドの使い方、イベント一覧や、第3引数の設定方法などについて初心者向けに解説します。

できるだけ分かりやすく解説するので最後まで見てね！

📖目次に戻る

addEventListenerメソッドの使い方（3ステップ）

addEventListenerメソッドを使って、ボタンにクリックイベントを登録する方法を例に解説します。

buttonにクリックするとアラート文を表示する処理を登録

３ステップでわかりやすく解説するよ！

step
1要素の作成

まずは、HTMLでイベントを設定する要素を作成します。

今回は、要素を取得しやすいようにIDを付与（例 : myButton ）しておくよ！

step
2要素の取得

次にJavaScriptで、先ほど作成した要素を取得します。

今回は要素にID( 'myButton' )を付与しているので、document.getElementByIdを使って取得します。

const button = document.getElementById( 'myButton' );

基本的に、取得した要素は変数（定数）に入れて利用するよ！

step
3イベントリスナーの追加

最後に、取得した要素に .（ドット）でaddEventListenerメソッドを繋げます。

イベントの種類は「クリック」なので第一引数に「click」、第二引数に「実行する処理（関数）」を設定します。

button.addEventListener( 'click' , () => {
alert('クリックされたよ！');
});

以上で、ボタンにクリックイベントを登録する手順は完了です。

ボタンクリック時に、「クリックされたよ！」というアラートが表示されるようになりました！

📖目次に戻る

addEventListenerの関数の書き方

今回、第二引数に設定しているのは無名のアロー関数ですが、アロー関数を使用せずに書くと次のようになります。

button.addEventListener( 'click' , function() {
alert('クリックされたよ！');
});

また、あらかじめ用意した関数（名前付き関数）を設定することもできます。

const showAlert = () => alert('クリックされたよ！'); //外部で関数を用意

button.addEventListener( 'click' , showAlert ); //用意した関数を設定する

一般的な無名関数と名前付き関数の使い分け方は以下の通りです。

無名関数（名前のない関数）：

簡単な処理をその場で定義して使いたい場合に便利！
使い捨ての関数として利用されることが多い！

名前付き関数：

複数の場所で同じ処理を使いたい場合に便利！
関数の名前が付くため、コードの可読性が向上することがある！

再利用性、可読性、デバッグのしやすさなどを考慮しながら適切な方法で書けると良いね！

📖目次に戻る

addEventListenerのイベント一覧

addEventListenerメソッドには、クリック以外にも色々なイベントを設定することができます。

使用頻度が割と高めのイベントを種類別に一覧にしてみたのでご覧ください。

ボタンをクリックしてリンク先に飛んで見てね！

マウスイベント
click	要素がクリックされたとき
dblclick	要素がダブルクリックされたとき
mousedown	マウスボタンが押されたとき
mouseup	マウスボタンが離されたとき
mousemove	マウスが動いたとき
mouseover	マウスが要素の上に乗ったとき
mouseout	マウスが要素から離れたとき
mouseenter	マウスが要素に入ったとき（子要素は無視）
mouseleave	マウスが要素から離れたとき（子要素は無視）

キーボードイベント
keydown	キーが押されたとき
keyup	キーが離されたとき
keypress	キーが押されたとき（廃止予定、keydownを使用）

フォームイベント
submit	フォームが送信されたとき
change	入力、テキストエリア、セレクトボックスの内容が変更されたとき
input	入力フィールドの内容が変更されたとき（changeよりも細かく反応）
focus	要素がフォーカスを受けたとき
blur	要素がフォーカスを失ったとき
reset	フォームがリセットされたとき

ウィンドウイベント
load	ページが読み込まれたとき
resize	ウィンドウのサイズが変更されたとき
scroll	ページや要素がスクロールされたとき
unload	ページがアンロードされたとき（廃止予定、beforeunloadを使用）
beforeunload	ページがアンロードされる前

ドラッグ＆ドロップイベント
drag	要素がドラッグされているとき
dragstart	ドラッグ操作が開始されたとき
dragend	ドラッグ操作が終了したとき
dragenter	ドラッグされた要素がドロップターゲットに入ったとき
dragover	ドラッグされた要素がドロップターゲットの上にあるとき
dragleave	ドラッグされた要素がドロップターゲットから離れたとき
drop	ドラッグされた要素がドロップされたとき

タッチイベント（モバイルデバイス）
touchstart	画面に触れたとき
touchmove	画面上で指が動いたとき
touchend	画面から指が離れたとき
touchcancel	タッチ操作がキャンセルされたとき

クリップボードイベント
copy	コンテンツがコピーされたとき
cut	コンテンツがカットされたとき
paste	コンテンツが貼り付けられたとき

メディアイベント
play	再生が開始されたとき
pause	再生が一時停止されたとき
ended	再生が終了したとき
volumechange	音量が変更されたとき

これらのイベントを使って、色々な機能を実装してみてね！

📖目次に戻る

イベントを複数設定する方法

addEventListenerメソッドを使って複数のイベントを設定する方法について３つご紹介します。

例として「クリック」「マウスオーバー」「マウスアウト」の３つを設定してコンソールで「（イベント名）したよ！」と表示してみます。

クリック、マウスオーバー、マウスアウト

今回は、以下で取得したボタンの要素（例：button）に対してイベントを設定します。

const button = document.getElementById( 'myButton' );

３つの方法はどれも同じ結果になるよ！

📖目次に戻る

複数のイベントを個別に設定する

addEventListenerメソッドを使って各イベントを個別に設定します。

button.addEventListener( 'click' , function(event) {
console.log( 'clickしたよ！' );
});
button.addEventListener( 'mouseover' , function(event) {
console.log( 'mouseoverしたよ！' );
});
button.addEventListener( 'mouseout' , function(event) {
console.log( 'mouseoutしたよ！' );
});

コードが冗長になるけど、単純明快で読みやすいね！

📖目次に戻る

配列と「forEach」を使って一括で設定する方法

複数のイベントに同じリスナー関数を設定したい場合は、配列を使ってforEachループで設定します。

const events = [ 'click' , 'mouseover' , 'mouseout' ];
events.forEach( event => {
button.addEventListener( event , (e) => {
console.log( `${e.type} したよ！` );
});
});

「 e.type 」の部分は、イベントオブジェクトeのtypeプロパティを呼び出しています。

イベントオブジェクトeは、イベントに関する様々な情報を持っており、その中のtypeプロパティは、イベントの種類（click、mouseover、mouseoutなど）を示します。

「 ${ } 」の部分は、テンプレートリテラルと呼ばれる構文で、変数や式を文字列の中に埋め込んでいます。

同じ処理を適用する場合に限られるけど、簡潔でコード量が少ないね！

📖目次に戻る

イベントごとに異なるリスナーを設定する方法

オブジェクトの各プロパティに対応するイベントリスナー関数を設定し、forEachループでそれらをボタンの各イベントに設定します。

オブジェクト eventListeners を定義し、各プロパティに対応するイベントリスナー関数を設定しています。

次に、Object.keys を使ってオブジェクトのキーを配列として取得し、forEachループで各キーに対してaddEventListenerを呼び出しています。

コードがシンプルで、メンテナンスも簡単だね！

📖目次に戻る

addEventListenerの第三引数

addEventListenerの第3引数を指定することで、フェーズを調整したり、イベントを１回だけ実行したりとイベントリスナーの動作を細かく制御することができます。

フェーズとはイベントがDOMツリーを通じてどのように流れるかを制御する過程のことだよ！

📖目次に戻る

フェーズの調整（イベントの伝搬の順序）

第3引数にブーリアン値（true または false）を指定することで、イベントリスナーがキャプチャフェーズで実行されるかバブリングフェーズで実行されるかを指定することができます。

true: イベントリスナーがキャプチャフェーズで実行される。
false: イベントリスナーがバブリングフェーズで実行される。（デフォルト）

各フェーズを図にすると次のようになるよ！

キャプチャフェーズ（Capturing Phase）:
・イベントがドキュメントルートから始まり、ターゲット要素に到達するまでの間に発生。
・イベントがターゲット要素に達する前に祖先要素でイベントリスナーが呼び出される。
ターゲットフェーズ（Target Phase）:
・イベントが実際にターゲット要素に到達した時に発生。
・ターゲット要素自体に設定されたイベントリスナーが呼び出される。
バブリングフェーズ（Bubbling Phase）:
・イベントがターゲット要素から始まり、再び祖先要素に向かって逆方向に伝播。
・ターゲット要素から始まり、その祖先要素でイベントリスナーが呼び出される。

それでは実際に確認してみましょう！

以下のHTMLを用意し、ボタンをクリックした場合のフェーズの確認を行います。

<h1>H1 Click</h1>
<input type="button" value="クリック">

javascriptは以下のコードを用意します。

各DOM要素にクリックイベントリスナーを追加して、キャプチャフェーズとバブリングフェーズにおけるクリックイベントの伝播順序を確認します。

キャプチャフェーズのリスナーには、第3引数に true を設定しています。

const elements = [window, document, document.documentElement, document.body, document.querySelector('h1'), document.querySelector('input')];
const names = ['Window', 'Document', 'HTML', 'Body', 'H1', 'Button'];

elements.forEach((element, index) => {
if (element) {
// キャプチャフェーズのリスナー
element.addEventListener('click', () => {
console.log(`${names[index]} (キャプチャ)`);
}, true );
// ターゲットフェーズのリスナー（<input>要素にのみ追加）
if (element === document.querySelector('input')) {
element.addEventListener('click', () => {
console.log(`Button (ターゲット)`);
});
}
// バブリングフェーズのリスナー
element.addEventListener('click', () => {
console.log(`${names[index]} (バブリング)`);
});
}
});

ボタンをクリックして、コンソールを表示してみるとイベントが伝わった順番に表示されます。

クリックイベントがキャプチャリングフェーズでwindowから順に降りてきて、ターゲットフェーズで<input>要素に達し、その後バブリングフェーズで再びwindowまで戻ってるね！

📖目次に戻る

オプションオブジェクトとしての第3引数

第3引数に以下のオプションオブジェクトを渡すことで、イベントリスナーの動作を詳細に制御することができます。

主なオプションとその効果は以下の通りです。

capture: （デフォルトは false ）
true の場合、イベントのキャプチャーフェーズでリスナーが呼び出される（親から子要素へとイベントが伝播する段階）。
once: （デフォルトは false ）
true の場合、リスナーが一度だけ呼び出され、自動的に削除される。
passive: （デフォルトは false ）
true の場合、スクロールなどのタッチイベントのデフォルトのアクションが無効化されないようにする。
（スクロールのパフォーマンスを向上させるために使用される。）
signal:AbortSignalオブジェクトを指定して、イベントリスナーをプログラム的に削除することができる。

それでは、実際にオプションオブジェクト指定してイベントを１回のみ実行してみよう！

📖目次に戻る

イベントを１回のみ実行する

イベントを１回のみ実行する場合は、addEventListenerの第3引数でonceプロパティをtrueに設定します。

今回は、ボタンのクリックイベントを設定するので、以下のHTMLを用意します。

javascriptは、一度だけ実行するためにaddEventListenerメソッドの第3引数に「once : true;」を設定しています。

const handler = () => {
console.log('一回だけ実行されるよ！');
};
const button = document.getElementById('myButton');
button.addEventListener('click', handler, { once: true });

実際に確認してみると、何度クリックしても最初の一回のイベントしか実行されていないのがわかると思います。