##1. はじめに
本記事では、【JavaScript】イベント・イベントハンドラの「演習」について記載する。
##2. 演習の内容
###内容
内容としては、以下の通り。

テキストボックスに文字列を入力して、ボタンを押したら文字列をリストに追加していくプログラムの開発を行う。

イベントの登録には、addEventListenerを利用する。

addEventListenerするには、DOMContentLoaderイベント※発生時とする。

※HTMLドキュメントの読み込みと解析が完了したときに発生

###JavaScriptの記述にあたっての留意点本件は、テキストボックスに入力された文字列をリストに追加していく関数を使って演習を仕上げていく。 ※構文内に注釈を入れてあるので、構文の意味は以下の通り。

イベントハンドラを使った解説

index.js

function appendElement() {
  // ↑リストに追加していく関数
	let result = document.getElementById('result');
  // ↑テキストボックスの要素を取得
	let li = document.createElement('li');
  // ↑liタグの要素を生成
	let text = document.createTextNode(result.value);
  // ↑テキストノードを生成
	li.appendChild(text);
  // ↑liタグの要素に、テキストノード「text」を追加
	lists.appendChild(li);
  // ↑idがlistのulタグに「li」を追加。具体的には「<li>入力した文字列</li>」が追加される。
}

似たようなことを以前にも実施してある。以下リンク先を掲載する。

リンク先:JavaScript DOM操作⑨ 「DOM操作の演習」

##3. 完成品のイメージ
イメージとしては、以下GIFを参照。

テキストボックスに文字を入力し「追加」ボタンをクリックしたら、ブラウザ上に入力した文字が表示される。

かつ、

要素上にli要素が追加される。

##4. 実践
###マークアップ
まずはじめに、HTMLの作成から取り掛かる。
作成にあたり、用意しないといけない要素は以下の3つ。

id属性を持たせた空のul要素

id属性を持たせたテキストボックス

id属性を持たせたボタン(ボタンの表記は「追加」)

3つの条件を含んで作成したHTMLファイルは以下の通り。

index.html

index.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>
    <ul id="lists"></ul>
    <input id="result" type="text" />
    <input id="btn" type="button" value="追加" />
    <script src="js/index.js"></script>
  </body>
</html>

こちらをブラウザに表示させる。 ![スクリーンショット 2021-11-17 11.24.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/9df128c2-817d-fdaa-f553-37ac91e63818.png) 以前に似たような例題をやったので、参考にリンク先を掲載する。

リンク先:JavaScript DOM操作⑨ 「DOM操作の演習」

###JavaScriptの記述次にJavaScriptの記述を行う。 ####イベントの仕込み #####構文の記述

index.js

index.js

let b = document.getElementById('btn');
// ↑変数bを定義し、HTML内で作成した追加ボタンのidに紐付け
b.addEventListener('click',function () {
// ↑変数b(ボタン)に、クリックした際のイベントを仕込む
  appendElement();
// ↑テキストボックスに追加する際の関数を呼び出し
}, false);
// ↑イベント伝播形式

イベント伝播形式

この構文で何がしたいかと言うと、

ボタンをクリックされた際のイベントを仕込む

ということ。
当然ながら、addEventListenerだけでは演習の条件をクリアできない。
#####実際に間違った記述で検証してみた
addEventListenerだけでブラウザを用いて検証してみる。

エラーが発生してしまった。エラー内容は以下の通り。

_Uncaught ReferenceError: appendElement is not defined at HTMLInputElement.<anonymous>_
意味としては、
appendElementが定義されていません
とのこと。

実際にテキストボックス内へ文字列をを入力してブラウザ上に表示させる働きは留意点で挙げた構文が担っている。
すべてを記述すると下記の通り。

JavaScript構文の全体記述

index.js

let b = document.getElementById('btn');
b.addEventListener('click',function () {
  appendElement();
}, false);

function appendElement() {
  let result = document.getElementById('result');
  let li = document.createElement('li');
  let text = document.createTextNode(result.value);
  li.appendChild(text);
  lists.appendChild(li);
}

それぞれの役割としては、

ボタンイベントはlet b =〜以降が担っており、

テキストボックスに文字列を入力しブラウザ上に表示する役割はfunction appendElement()〜以降が担っている。

###ブラウザでの検証実際にブラウザにて挙動を確認していく。 ####ブラウザ上の文字列 ![ブラウザ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/fd30812b-4877-878c-b16c-8383b2ee8eeb.gif) ####li要素の追加チェック ![要素.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/662822/539e71ec-8152-372e-4636-e734acad99f2.gif) 検証の結果、

ブラウザ上に文字列が追加され、li要素が追加されていることを確認できた。

##5. おわりに
本項をもってJavaScriptの基本に関しての執筆を終了とする。
また学びがあれば続きを記載していきたいと思う。