用户点击、输入、滚动都会触发事件。监听写在父元素上(委托),往往比给每个子节点挂监听更省事。

target 冒泡 ↑ 父元素可委托处理
图:事件从目标冒泡到父节点的路径

基础写法

button.addEventListener("click", (e) => {
  console.log("clicked", e.target);
});

事件委托

ul.addEventListener("click", (e) => {
  const li = e.target.closest("li");
  if (!li || !ul.contains(li)) return;
  console.log("选中", li.dataset.id);
});
好处:列表动态增删时,不必反复绑定/解绑子项监听。