第 17 课 7 / 20 | 编码:L17-11
核心知识

事件委托

在稳定父容器监听事件,再根据 target 找到实际子项,动态新增项也能被处理。

  • 依赖冒泡
  • 使用 closest 匹配控件
  • 检查匹配项确实属于当前容器
tabs.addEventListener('click', event => {
  const tab = event.target.closest('[role="tab"]');
  if (!tab || !tabs.contains(tab)) return;
  selectTab(tab);
});