0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

event.targetプロパティを使用したプログラム例

Last updated at Posted at 2024-11-16

1. 概要

コメントでのご指摘,ありがとうございました.こちらを参考にプログラム例を修正したものになります.

event.target は,イベントが発生した元の要素を指します.
これは複数の要素の中の,いずれかがイベントを起こした時に有用です.

(初心者の勉強記録です.)

2. 実装例

複数のチェックボックスにイベントを設定し,それぞれの状態をコンソールに出力してみます.

2.1. チェックボックスの設置

<!-- HTML -->
<div>
  <input type="checkbox" class="toggle-btn" id="btn1"> チェックボックス 1
  <input type="checkbox" class="toggle-btn" id="btn2"> チェックボックス 2
  <input type="checkbox" class="toggle-btn" id="btn3"> チェックボックス 3
</div>

2.2. 全てのチェックボックスを取得し,イベントリスナーを設定

//script
document.querySelectorAll('.toggle-btn').forEach(btn => {
  btn.addEventListener('change', event => {
    console.log(`ID: ${event.target.id} の状態: ${event.target.checked ? 'ON' : 'OFF'}`);
  });
});
  1. document.querySelectorAll('.toggle-btn'):クラス toggle-btn を持つすべての要素を取得.
  2. .forEach(btn => { }): NodeList の各要素(ここではチェックボックス)に対して順番に処理を行う.
  3. btn.addEventListener('change', event => { }):各チェックボックスに対して change イベントリスナーを追加.(チェックされたり外されたときに発生する)
  4. event => { }:イベントが発生した際の処理を定義.(イベントオブジェクトで,発生したイベント情報を持っている)

2.3. event.target の役割

  • event.target:イベントが発生した要素を指します.(この例ではチェックボックスそのも)
  • event.target.id:イベントが発生したチェックボックスの id 属性を取得.
  • event.target.checked:チェックボックスの現状を示す.(チェックしている→true,チェックしてない→false)

2.4. 結果

3. まとめ

event.target は「そのイベント(今回はチェックする)が発生した要素」を指します.

CodePenなどで上記のコードを貼り付けてみてください.
Consoleに,エラーに応じたメッセージが表示されていると思います.

最後まで読んでいただきありがとうございまいた.

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?