##1. はじめに
本記事では、【JavaScript】イベント・イベントハンドラの「addEventListenerメソッド」について記載する。
##2. addEventListenerとは？
###概要
基本的な概要としては、以下の4つ。
1つの要素や1つのイベントに対して、複数のイベントハンドラを設定できる。
onxxxx(onclickなど)では、1つの要素や1つのイベントに対して
1つのイベントハンドラしか設定できない問題がある。
シンプルなアプリならよいが、複数なアプリを開発するときに問題になってくる。
onxxxx(onclickなど)では、本来レイアウトを定義するべきHTMLの中にJavaScriptのコードを混在させており、可読性が落ちる。(モダンではない書き方)
###構文
要素オブジェクト.addEventListener(イベントの種類,function() {
//イベントハンドラ
}, false);
※最後のfalseは、イベントの伝播形式を指定できる。高度な内容で活用頻度は低いため、ここでは省略可能。
通常はfalseを設定すればOK。
###イベントの伝播とは？ ####凡例 ```index.html
###イベントの伝播のルート イベントが発生した際、以下のルートを辿っていく。 DOMツリーを頭に浮かべながら見てほしい。 ####①キャプチャーフェース :::note windowからその子へ、そしてその子へ...と順番に目的のノードに向かってイベントが走るフェーズ。 ::: ####②ターゲットフェーズ :::note イベントが発生した要素にイベントが伝わるフェーズ。 ::: ####③バブリングフェーズ :::note イベント発生元から親へ向かって順々にイベントが走るフェーズ。 :::
###第三引数 イベントの伝播のルートを定める存在が、addEventListenerの第三引数である。
要素オブジェクト.addEventListener(イベントの種類,function() {
//イベントハンドラ
}, true or false);
true :キャプチャーフェーズ時に発火する。（親要素から先に発火）
false:バブリングフェーズ時に発火する。（子要素から先に発火）=初期値
trueとfalseを使い分けることによって、
どちらから発火させるか？をコントロールすることができる。
##3. 例題 ###内容 :::note warn ボタンをクリックしたら、'イベント発生!'と出力されるプログラムの作成。 ::: ###実践前のチュートリアル 実践に入る前に、完成形を先に表示しておく。 
###マークアップ ブラウザに置換前の文字をブラウザへ表示しないといけないので、HTMLの作成から取り掛かる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input id="btn" type="button" />
<script src="js/index.js"></script>
</body>
</html>
マークアップしブラウザで表示すると以下のようになる。
###JavaScriptの記述 次にJavaScriptを仕上げていく。
window.onload = function () {
let b = document.getElementById('btn');
b.addEventListener('click', function () {
console.log('イベント発生!');
});
};
上記構文に関して、順を追って解説していく。
####window.onload = function ()
:::note warn
ページを読み込み終わった際に発生する関数を作成。
:::
####let b = document.getElementById('btn');
:::note warn
変数bを定義し、inputタグ内のidを取得する。
:::
####b.addEventListener('click', function ()
:::note warn
addEventListenerメソッドの()内に、
クリックされた際にどのように動くかの関数を作成する。
:::
####console.log('イベント発生!');
:::note warn
上記addEventListenerメソッドを動かした際に、コンソールへ出力される文字列を記述する。
:::
###ブラウザでの検証 実際にブラウザにて挙動を確認していく。  検証の結果、
ボタンをクリックしたら、コンソールへ'イベント発生!'の文字列が出力された。
##4. おわりに
次項:【JavaScript】イベント・イベントハンドラ⑥ 「演習」に続く。