イベント処理

DOM操作におけるイベント処理とは

DOM操作におけるイベントとは、ブラウザを利用する以下のようなユーザーの行動のことを指す。

• 「ボタンをクリックしたとき」
• 「（横線3本のアイコン）をクリックしたとき」
• 「画面をスクロールしたとき」など、
  →　ユーザーの行動に合わせて、あらかじめプログラムしていたDOM操作を行うのがイベント処理。

ボタンを押すとテキストが表示される処理

現状　「ポチッと！」のボタンがひとつだけ。

HTMLコードの追加

ボタンをもうひとつ作成。

.jsファイルでコードを記述

'もひとつポチッと！'ボタンを押したときの挙動は、

1. li要素を新しく作成する
2. 作成したli要素に「ThankYou!×2」というテキストを追加する
3. 作成したli要素をul要素の子要素として末尾に追加する

// 'もひとつポチッと！'ボタンのadd-btnというidを取得し、定数に代入
const addBtn = document.getElementById('add-btn');
// parent-listというidを持つHTML要素を取得し、定数に代入する
const parentList = document.getElementById('parent-list');

// HTML要素がクリックされたときにイベント処理を実行する
addBtn.addEventListener('click', () => {
// li要素を新しく作成する
const childList = document.createElement('li');

//作成したli要素に「ThankYou!×2」というテキストを追加する
childList.textContent = 'ThankYou!×2';

// 作成したli要素をul要素の子要素として末尾に追加する
parentList.appendChild(childList);
});

結果

もひとつポチッと！ボタン押下の前

もひとつポチッと！ボタン押下のあと

が追加されている。

イベントの種類

click クリックしたとき（マウスボタンを押して離したとき）
mousedown マウスボタンを押したとき
mouseup マウスボタンを離したとき
mousemove マウスカーソルを移動したとき
keydown キーボードのキーを押したとき
keyup キーボードのキーを離したとき
submit フォームを送信したとき
focus HTML要素にフォーカスしたとき
scroll 画面をスクロールしたとき

《まとめ》

HTML要素.addEventListener('イベントの種類', () => {
  イベント処理 //<li>要素を追加してテキストを表示など
});

選択されたラジオボタンの値を取得できる処理

先に完成形

血液型を選択して、値を取得ボタンを押下すると、値が表示される。

HTMLファイルの記述

#先ほどのHTMLファイルに下記を追加
  <form name="areaForm">
    <input type="radio" name="area" value="typeA" />A型
    <input type="radio" name="area" value="typeO" />O型
    <input type="radio" name="area" value="typeAB" />AB型
  </form>
  <button id="area-btn">値の取得</button>

.jsファイルにコードを記述

// os-btnというidを持つHTML要素を取得し、定数に代入する
const areBth = document.getElementById('area-btn');
// HTML要素がクリックされたときに
areBth.addEventListener('click' , () => {
// 選択されたラジオボタンの値を取得する
const area = document.forms.areaForm.area.value;
// 取得した値を出力する
console.log(area);
});

補足

先に、html要素.addEventlistener('click', )=> {}); の、クリックされた時何を表示・取得させるかから考えて、書き出したらわかりやすいかも？

getElementById()を使っても良いが、formの場合はnameの値を使うことで簡単に取得できる。続けてinput typeの、nameの値を記述すれば、valueを取得できる。
注意点：HTMLのid名やclass名にハイフン-を使ってしまうと、JavaScriptでエラーが発生してしまうので気を付ける。

// 選択されたラジオボタンの値を取得する
const area = document.forms.areaForm.area.value;

チェックボックスの値を取得できる処理

チェックボックスがラジオボタンと異なる点は「複数の項目を選択できる」という点。なので、選択されたすべての値を出力するためにfor文とif文を組み合わせて使う。

おさらい

• for文

for (カウンタ変数の初期値; 条件式; カウンタ変数の増減値) {
  カウンタ変数が決まった値になるまで繰り返す処理
}

• if文

if (条件式) {
  条件が成り立つときの処理
}

• 使用するプロパティ

#チェックが入るとtrueを返す
チェックボックス.checked

#チェックボックスの数だけ処理を繰り返すfor文に使う
.length

先に完成形

HTMLファイルの記述

<div>
  <form name="cityForm">
   行ったことのある街を選択してください<br/>
    <input type="checkbox" name="city" value="osaka" />大阪
    <input type="checkbox" name="city" value="koube" />神戸
    <input type="checkbox" name="city" value="kyouto" />京都
    <input type="checkbox" name="city" value="nara" />奈良
    <input type="checkbox" name="city" value="wakayama" />和歌山
   </form>
  </div>
  <button id="city-btn">値の取得</button>

javascriptの記述

const cityBtn = document.getElementById('city-btn');
// HTML要素がクリックされたときに
cityBtn.addEventListener('click' , () => {
// 全てのチェックボックスを配列風のデータで取得
const items = document.forms.cityForm.city;
// 繰り返し処理でチェックボックスを1つずつ取り出し、もし選択されていれば値を出力する
for(let i =0; i < items.length; i++){
if(items[i].checked ){
  console.log(items[i].value);
}
}
});

まとめ

1. formの場合はname属性の値を使うことで、簡単にHTML要素を取得できる。
2. フォームの値を取得するには.valueプロパティを使う
3. 文字列の文字数を取得するには.lengthプロパティを使う
4. チェックボックスに対してcheckedプロパティを使うことで、選択されているかどうかをtrueまたはfalseで取得できる