Chapter 13 / DOM Events

事件委托清单实验台

所有完成与删除操作都从同一个父级 ul 监听器进入。新增任务不会绑定新监听器，但按钮仍能响应。

真实绑定位置

<ul id="taskList"> .addEventListener("click", ...)

任务列表

点击任务内的按钮，观察右侧事件对象。

父级监听器：1

理解 event.target 指向真正被点中的元素

data-id="1"
用 closest("li") 找到所属任务行

data-id="2"
确认 currentTarget 始终是父级 ul

data-id="3"

监听器数量对比

假设每个任务都有“完成”和“删除”两个按钮。

每个按钮单独绑定 6

父级委托绑定 1

taskList.addEventListener("click", (event) => {
  const button = event.target.closest("button");
  const item = event.target.closest("li");
  // 根据 button.classList 进入完成或删除分支
});