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

1. 概要

event.targetは JavaScript でイベントが発生した要素を指します.

ここではチェックボックスの切り替えを検出して，その結果をコンソールに出力する簡単な例を紹介します.

（初心者の勉強記録です．）

2. 実装例

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

以下の HTML コードによりチェックボックスを作成します．

<!-- HTML -->
<div>
    <input type="checkbox" id="sample-Btn">チェックボックス
</div>

2.2. ボタン要素の取得

sample-Btn というIDを持つ要素を取得し，変数 checkBtn へ格納する．

//script
const checkBtn = document.getElementById('sample-Btn');

2.3. イベントリスナー設定

チェックボックスの状態が変わったときに typeChange 関数を呼び出す．

//script
checkBtn.addEventListener('change', typeChange);

2.4. typeChange関数

event.targetを使用して，チェックボックスの状態を Console へ出力する関数の実装．

//script
function typeChange(event) {
    console.log('チェックボックスの状態:', event.target.checked);

    // チェックされた場合
    if (event.target.checked) {
        console.log('チェックされました');
    }else{
        console.log('チェックが外されました');
    }
}

2.5. 結果

3. まとめ

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

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

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