JavaScript

addEventListener method of JavaScript.

addEventListener

　addEventListenerとは、イベントリスナー（さまざまなイベントに合わせて処理を実行させる関数）を登録するためのメソッドです。ブラウザ上では、ページが読み込まれたり、クリックやマウスホバー、キーボード入力など様々なイベントが発生します。addEventListenerで、イベントリスナーを追加することで発生したイベントに応じて指定した関数を実行させることができます。

　例えば、キーボード入力があるたびにフォームの内容を確認したり、送信前にアラートを出したり、イベントに応じて HTML を書き換えるといったことが可能です。

基本的な構文と書き方について

　addEventListener は、イベントの種類とそのイベントが発生した時に実行する関数の２つが基本的に使用するものです。

　要素に対して使用し、クリックイベントを第1引数に指定すれば、クリックした時に登録した関数が実行されます。


対象要素.addEventListener(イベントの種類, 実行したい関数, オプション);

　第１引数にイベントの種類を指定することで、このイベントがどのようなケースに対応するのかを特定します。

　第２引数に関数を指定することで、任意のイベントが発生した時に関数内に書かれた処理を実行できるわけです。

　第３引数は、イベントの伝搬の方式を「true / false」でキャプチャフェーズで実行させるのかバブリングフェーズで実行させるのかを指定するのですが通常は false を指定しておきましょう。


対象要素.addEventListener(イベントの種類, 実行したい関数, false);

　クリックなどのイベントが発生すると、ルート要素から発生した要素を探していき、ターゲットの要素を検出します。そのあとルート要素まで遡る形でイベントが伝播していきます。

　ルート要素からターゲットを検出するまでをキャプチャフェーズ、ターゲット要素からルートに遡るまでをバブリングフェーズと言います。

　addEventListenerのオプションは false で、子要素から親要素に向かってイベントが伝播します。もし、親要素のイベントを先に拾う場合には、オプションを true にしましょう。イベントを伝播させたくない場合は、stopPropagationメソッドでイベントの伝播を防ぐことができます。

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

　addEventListenerを記述する方法として、3種類の関数を設定する書き方があります。

　1つ目は、外部の関数を設定する方法です。


対象要素.addEventListener(イベントの種類, sampleEvent, false);

function sampleEvent() {
	//ここに処理を記述する
}

　上記の基本的な構文の「実行したい関数」の場所に「sampleEvent」という関数を入れただけです。

　この方法は、「sampleEvent()」という関数を addEventListenerを使ったイベント処理の外側で定義しているのがポイントです。関数内の処理が複雑であったり、ファイルが複数に分割されている場合などに使われるのが一般的です。

　2つ目は、無名関数を設定する方法です。


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

　この方法が一般的によく使われる書き方になるでしょう。特徴としては、第2引数へそのまま関数を記述しているのがポイントです。単純な処理しか記述しないようなケースでは、関数を別で用意するよりもコードが分かりやすくなります。

　この２つ目の書き方も JavaScriptを触り始めたばかりの頃はわかりづらかったのを思い出します。「//ここに処理を記述する」という文字列をなくし、上記の基本的な構文とどこが違うか並べて記述してみます。


対象要素.addEventListener(イベントの種類, 実行したい関数, false);
対象要素.addEventListener(イベントの種類, function() {}, false);

　いかがでしょうか？「実行したい関数」の部分に無名関数を入れただけです。その後、{} の間で改行し、「//ここに処理を記述する」という文字列を入れているだけです。

　3つ目は、アロー関数を設定する方法です。


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

　こちらは、上記２つ目の無名関数を使った方法を ES2015の書き方にしたパターンなので、特徴的には同じになります。

「click」によるクリックイベント処理の作り方

　実際にイベント処理をプログラミングしてみます。まずは、次のような button要素を用意します。


<button id="btn">表示</button>

　このボタンをクリックしたら、イベント処理が発動して関数が実行され、コンソールに「クリックされました」と表示させてみます。

JavaScript source


const btn = document.getElementById('btn');

btn.addEventListener('click', function() {
	console.log('クリックされました！');
}, false);

　この例では、HTMLの button要素をまずは取得してその要素に対して addEventListener()を実行しています。これにより、ボタン要素をクリックしたら設定されている関数が実行されるようになるわけです。今回の例だと、クリックしたあとにコンソールへ文字列が出力されます。

HTML + JavaScript source


<button id="btn">表示</button>
<script>
	const btn = document.getElementById('btn');
	btn.addEventListener('click', function() {
		console.log('クリックされました！');
	}, false);
</script>

　この例では、記述の順番を間違うと動作しなくなりますのでご注意ください。button要素の前に script要素を入れてしまうと、プログラムは上から順番に読み込むため、


document.getElementById('btn')

この部分が、button要素の前に読み込まれるため、「id='btn' がない」というエラーになってしまいます。

　しかし、実際のプログラミングでは、JavaScriptは head要素の中に書くことが多いと思います。そうなった場合、この記述は使えないとなってしまいますが、これを回避するのも addEventListenerで実現できます。


document.addEventListener('DOMContentLoaded', function() {}, false);

　このイベントリスナーの DOMContentLoadedは、ページの読み込みが完了したときに発動させたい場合に使います。よってページの documentがすべて読み込まれている状態で、id='btn'を探しますのでエラーになることはありません。


<script>
document.addEventListener('DOMContentLoaded', function() {
	const btn2 = document.getElementById('btn2');
	
	btn2.addEventListener('click', function() {
		console.log('クリックされました！２');
	}, false);
}, false);
</script>

<button id="btn2">表示</button>

主要なイベントリスナー

イベントリスナーの一覧

　addEventListenerでよく使われる主要なイベントの種類について見てみます。イベントの種類は非常にたくさん用意されていますが、一般的には以下のものがよく使われます。

load
Webページの読み込みが完了した時に発動。（画像などのリソースすべて含む）
DOMContentLoaded
Webページが読み込みが完了した時に発動。（画像などのリソースは含まない）
click
マウスボタンをクリックした時に発動。
mousedown
マウスボタンを押している時に発動。
mouseup
マウスボタンを離したときに発動。
mousemove
マウスカーソルが移動した時に発動。
keydown
キーボードのキーを押したときに発動。
keyup
キーボードのキーを離したときに発動。
change
フォーム部品の状態が変更された時に発動。
submit
フォームのsubmitボタンを押したときに発動。
scroll
画面がスクロールした時に発動。

　この一覧にある「イベントの種類」は、addEventListener()の第1引数に設定できるものになります。

「change」によるイベント処理

　フォーム部品の状態を管理するときによく使われるイベント種類として「change」があります。「change」は、例えばラジオボタンがチェックされた時や文字列が入力されたあとなどにイベントが発動します。


<form name="myform">
	<input name="sample" type="text">
</form>

　例えば、このような単純な入力ボックスを１つだけ準備します。そして、この入力ボックスの状態が変化した時にイベントを発動させる処理を作ってみます。


var form = document.forms.myform;

form.sample.addEventListener('change', function() {
	console.log('状態が変化しました！');
}, false);

　フォーム部品の name属性は「document.forms」から取得できますので、まずは入力ボックスの要素を取得します。そこに addEventListener()を使って「change」イベントを実行しています。

　これにより、入力ボックスに何か文字列を入力してフォーカスを外すとコンソールに指定した「状態が変化しました」という文字列が出力されます。

使用例

　それでは実際に書いてみましょう。今回はクリックするたびに数値が増えていくカウンターを書いてみます。まずは id を持つ div を作ります。初期値は 0 にします。

<div id="counter">0</div>

　JavaScript で div がクリックされた時に実行する関数を書き、addEventListener で追加していきます。

// 要素を取得
const counter = document.getElementById("counter");

const addCount = () => {
//文字列を数値に変換
let num = parseInt(counter.textContent, 10);
//１追加する
counter.textContent = num + 1;
};

//addEventListenerで登録
counter.addEventListener("click", addCount);

　クリックするたびに数値が増えていくはずです。