5月21日(木)1、2コマ目
今日、やったこと
- querySelectorAll()
- forEach()メソッド
- eventオブジェクト
- event.target、event.currentTarget
今日のホワイトボード
querySelectorAll()
以下のサンプルで確認。
|
| 図 querySelectorAll()確認用サンプル |
JaavScriptには、セレクタを指定してタグを取得する以下の2つのメソッドがある。
|
| 図 querySelector()とquerySelectorAll() |
複数のタグに対して、同じイベントに同じイベントハンドラを指定した場合は、querySelectorAll()が便利。
なお、セレクタは下表のようになる。
| 対象 | セレクタ | |
|---|---|---|
| タグ | タグ名 | |
| ID | #ID名 | |
| クラス | .クラス名 |
forEach()メソッド
配列から要素を順に取り出して処理をおこなうときに便利。
|
| 図 forEach()メソッド |
for()でもできるけど、1行で簡潔に書くことができる。
ソースコードをあげておきます。
HTMLファイル
JavaScriptファイル
eventオブジェクト、targetプロパティ、currentTargetプロパティ
イベントハンドラ関数にて、eventオブジェクトで発生したイベント情報を確認できます。
eventオブジェクトの以下のプロパティでイベントが発生した要素（タグ）を取得することができます。
|
| 図 event.targetとevent.currentTarget |
多くのケースで、targetプロパティとcurrentTargetプロパティはおなじ要素を返しますが、addEventListener()を実行した要素と、イベントが発生した要素が親子関係になっている場合、２つのプロパティが返す要素は別々になります。
つくったサンプルのソースコードをあげておきます。
HTMLファイル
JavaScriptファイル
練習問題
以下をつくった。
|
| 図 練習問題 |
正解例をあげておきます。
HTMLファイル
ボタンは上の３つはおなじイベントハンドラ、下の３つもおなじイベントハンドラを指定したい。
そこで、上の3つを同じクラス、下の3つを同じクラスにして、querySelectorAll()でまとめて処理できるようにした。
JavaScriptファイル
次回は
練習問題をやってもらいます。
