イベント: ユーザー操作に反応

クリック、入力、スクロールなどに応答する。

イベント
ユーザー操作やブラウザ動作の通知。
リスナー
イベント発生時に呼ばれる関数。
イベント委譲
親要素で子のイベントをまとめて処理。

イベント基礎

ドアベル

ボタンを押す（クリック）と鳴る（リスナーが呼ばれる）。

addEventListener
// イベントリスナーの追加
const button = document.querySelector('button');


button.addEventListener('click', (event) => {
    console.log('Clicked!', event.target);
});


// 複数のイベント
button.addEventListener('mouseenter', () => console.log('Hover'));
button.addEventListener('mouseleave', () => console.log('Leave'));
Event Object
// イベントオブジェクト
element.addEventListener('click', (e) => {
    e.target;           // クリックされた要素
    e.currentTarget;    // リスナーがついた要素
    e.preventDefault(); // デフォルト動作を防止
    e.stopPropagation(); // 親への伝播を止める
});


// キーボードイベント
input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        submit();
    }
});

イベント委譲 (Event Delegation)

Bad
// ❌ Bad: 各要素に個別リスナー（非効率）
items.forEach(item => {
    item.addEventListener('click', (e) => {
        handleClick(e.target);
    });
});
Good
// ✅ Good: イベント委譲（Event Delegation）
container.addEventListener('click', (e) => {
    if (e.target.matches('.item')) {
        handleClick(e.target);
    }
});
Tip: 動的に追加される要素にも対応できる。

合格ライン

☐ addEventListener を使える
☐ イベント委譲を説明できる

演習課題

課題1: addEventListener
addEventListener でクリックイベントを処理してください。
課題2: イベント委譲
イベント委譲で動的要素を処理してください。