【JavaScript ・学習ログ5】イベント処理

# 目次
[イベント処理とは](#イベント処理とは)
[作成方法](#作成方法)
[1.フォームに入力された文字数をカウントする](#1-フォームに入力された文字数をカウントする)
[2.ラジオボタンの値を取得する](#2-ラジオボタンの値を取得する)
[3.チェックボックスの値を取得する](#3-チェックボックスの値を取得する)

<font color=gray>教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters</font>

## イベント処理とは
イベント（ブラウザ利用時のユーザーの行動）に併せDOM操作を行うこと。イベントはブラウザ利用時の『ユーザーの行動』を示す。

### 代表的なイベント
|種類| |
|-|-|
|clicK|クリックしたとき|
|mousedown|マウスボタンを押したとき|
|mouseup|マウスボタンを離したとき|
|mousemove|マウスカーソルを移動したとき|
|keydown|キーボードのキーを押したとき|
|keyup|キーボードのキーを離したとき|
|submit|フォームを送信したとき|
|focus|HTML要素にフォーカスしたとき|
|scroll|画面をスクロールしたとき|

## 作成方法

例：クリック時にリストを追加する。

(1) html：クリックできるボタン(button)と、要素を追加するためのリスト(ul)を用意する。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>イベント処理</title>
</head>
<body>
	<button id ="add-btn">リストの追加</button>
	<ul id="parent-list"></ul>
	<script src="js/event.js"></script>
</body>
</html>
```
(2) js: HTML要素を取得
```javascript
const addBtn = document.getElementById('add-btn');
const paremtList = document.getElementById('parent-list');
```

(3)js:イベント処理を作成
※イベント処理の作成には主に**addEventListener()メソッド**を使用する。
引数には『イベントの種類』と『関数』を指定する。
```javascript
addBtn.addEventListener('click',() => {
	const li = document.createElement('li');
	li.textContent = 'これはリスト要素です';
	paremtList.appendChild(li);
});
```
【実行】
![スクリーンショット 2023-11-02 211341.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/400aefca-3a8c-3afd-da64-1e6195f9f911.png)
### 1. フォームに入力された文字数をカウントする
(1) html: フォーム作成
```html
<form name="textForm">
	<input type="text" name="textBox">
</form>
<button id="count-btn">文字数のカウント</button>
 ```
(2) js: 文字列を取得、文字数出力
form要素の取得にはname属性の値を指定する。
※-(ハイフン)を使うとエラーが発生するため、nameはキャメルケースで記述する。
```javascript
const countBtn = document.getElementById('count-btn');

countBtn.addEventListener('click', () => {
	const text = document.forms.textForm.textBox.value;
	console.log(text.length + '文字');
});
```
【実行】
![スクリーンショット 2023-11-02 214223.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/a172feaf-b783-f95e-a5e5-dc0b4114ebc0.png)
### 2. ラジオボタンの値を取得する
(1) html: フォーム作成
```html
<form name="areaForm">
	<input type="radio" name="area" value="tokyo">東京都
	<input type="radio" name="area" value="aichi">愛知県
	<input type="radio" name="area" value="osaka">大阪府		
</form>
<button id="area-btn">値の取得</button>
 ```
 (2) js: ラジオボタンの値を取得、出力する
```javascript
const areaBtn = document.getElementById('area-btn');
areaBtn.addEventListener('click', () => {
	const area = document.forms.areaForm.area.value;
	console.log(area);
});
```
【実行】
![スクリーンショット 2023-11-03 015646.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/f8c55601-1cf7-c621-ea8f-3fef6fd5d431.png)

### 3. チェックボックスの値を取得する
(1)html: フォーム作成
```html
<form name="osForm">
		<label>利用したことのあるOSを選択してください</label><br>
		<input type="checkbox" name="os" value="windows">Windows
		<input type="checkbox" name="os" value="macos">macOS
		<input type="checkbox" name="os" value="linux">Linux
		<input type="checkbox" name="os" value="ios">iOS
		<input type="checkbox" name="os" value="android">Android
</form>
<button id="os-btn">値の取得</button>
 ```
(2)js: 値ではなく、input要素そのものを取得する
(3)js: forでチェックボックスを１つずつ取得し、ifで選択されている場合にのみ値を出力する
```javascript
const osBtn = document.getElementById('os-btn');
osBtn.addEventListener('click', () => {
	const os = document.forms.osForm.os;
	for (let i = 0; i < os.length; i++) {
		if (os[i].checked) {
			console.log(os[i].value);
		}
	}
});
```
【実行】
![スクリーンショット 2023-11-04 075058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/9e037d8b-78fc-dc21-0e73-38b0f926793a.png)
![スクリーンショット 2023-11-04 075127.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3520365/d06a869f-10bb-d619-70c5-7cb70d16c65a.png)

<hr>

-