目次
イベント処理とは
作成方法
1.フォームに入力された文字数をカウントする
2.ラジオボタンの値を取得する
3.チェックボックスの値を取得する
教材:侍テラコヤ『JavaScriptの基礎を学ぼう』https://terakoya.sejuku.net/programs/60/chapters
イベント処理とは
イベント（ブラウザ利用時のユーザーの行動）に併せDOM操作を行うこと。イベントはブラウザ利用時の『ユーザーの行動』を示す。
代表的なイベント
| 種類 | |
|---|---|
| clicK | クリックしたとき |
| mousedown | マウスボタンを押したとき |
| mouseup | マウスボタンを離したとき |
| mousemove | マウスカーソルを移動したとき |
| keydown | キーボードのキーを押したとき |
| keyup | キーボードのキーを離したとき |
| submit | フォームを送信したとき |
| focus | HTML要素にフォーカスしたとき |
| scroll | 画面をスクロールしたとき |
作成方法
例：クリック時にリストを追加する。
(1) html：クリックできるボタン(button)と、要素を追加するためのリスト(ul)を用意する。
<!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要素を取得
const addBtn = document.getElementById('add-btn');
const paremtList = document.getElementById('parent-list');
(3)js:イベント処理を作成
※イベント処理の作成には主にaddEventListener()メソッドを使用する。
引数には『イベントの種類』と『関数』を指定する。
addBtn.addEventListener('click',() => {
const li = document.createElement('li');
li.textContent = 'これはリスト要素です';
paremtList.appendChild(li);
});
【実行】
1. フォームに入力された文字数をカウントする
(1) html: フォーム作成
<form name="textForm">
<input type="text" name="textBox">
</form>
<button id="count-btn">文字数のカウント</button>
(2) js: 文字列を取得、文字数出力
form要素の取得にはname属性の値を指定する。
※-(ハイフン)を使うとエラーが発生するため、nameはキャメルケースで記述する。
const countBtn = document.getElementById('count-btn');
countBtn.addEventListener('click', () => {
const text = document.forms.textForm.textBox.value;
console.log(text.length + '文字');
});
【実行】
2. ラジオボタンの値を取得する
(1) 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: ラジオボタンの値を取得、出力する
const areaBtn = document.getElementById('area-btn');
areaBtn.addEventListener('click', () => {
const area = document.forms.areaForm.area.value;
console.log(area);
});
【実行】
3. チェックボックスの値を取得する
(1)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で選択されている場合にのみ値を出力する
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);
}
}
});
【実行】
