【JavaScript】Event Delegationで効率的にイベントを管理する方法｜バブリング・closest・data属性・動的DOM対応

<div id="list">
  <button class="item" data-id="1">編集</button>
  <button class="item" data-id="2">編集</button>
</div>

<script>
const list = document.getElementById('list');

list.addEventListener('click', (e) => {
  const btn = e.target.closest('.item');
  if (!btn || !list.contains(btn)) return;       // 委譲先のガード
  const id = btn.dataset.id;
  console.log('編集クリック:', id);
});
</script>

<div id="cards">
  <button data-action="edit" data-id="10">編集</button>
  <button data-action="delete" data-id="10">削除</button>
</div>

<script>
const actions = {
  edit: (id) => console.log('編集', id),
  delete: (id) => console.log('削除', id)
};

document.getElementById('cards').addEventListener('click', (e) => {
  const el = e.target.closest('[data-action]');
  if (!el) return;
  const fn = actions[el.dataset.action];
  if (typeof fn === 'function') fn(el.dataset.id);
});
</script>

<form id="profile">
  <input type="text" name="username">
  <input type="email" name="email">
</form>

<script>
const form = document.getElementById('profile');

form.addEventListener('input', (e) => {
  const el = e.target;
  if (el.name === 'username') {
    // 例：リアルタイムバリデーション
    el.setCustomValidity(el.value.length < 3 ? '3文字以上入力してください' : '');
  }
  if (el.name === 'email') {
    // 例：簡易チェック
    el.setCustomValidity(el.validity.typeMismatch ? 'メール形式が不正です' : '');
  }
});
</script>

<div id="menu">
  <div role="button" tabindex="0" data-action="open">開く</div>
</div>

<script>
const menu = document.getElementById('menu');

function handleAction(el) {
  if (!el) return;
  if (el.dataset.action === 'open') console.log('メニューを開く');
}

menu.addEventListener('click', (e) => handleAction(e.target.closest('[data-action]')));
menu.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    const el = e.target.closest('[data-action]');
    if (el) { e.preventDefault(); handleAction(el); }
  }
});
</script>