事件委托通过在父元素监听点击事件，利用e.target获取被点击子节点并提取数据，避免为每个子元素单独绑定事件；e.currentTarget始终是父容器，不可混淆；动态新增子节点无需重新绑定；必要时用preventDefault()或stopPropagation()控制行为。
直接在父元素上监听事件，通过 e.target 拿到真正被点击的子节点，再读取其属性或内容，就能完成数据从子节点向父级的传递。不需要给每个子元素单独绑事件，也不用手动调用函数传参。
用事件委托捕获子节点操作
把事件监听器加在父容器上，利用冒泡让子节点的点击“自动上升”到父级处理：
- HTML 中准备一个父容器（如
<ul>），里面多个子项（如多个<li>） - JS 中只对父容器调用
addEventListener('click', handler) - 在 handler 函数里用
e.target获取实际被点中的子元素 - 从
e.target上提取需要的数据，比如e.target.textContent、e.target.dataset.id或e.target.value
区分目标元素与当前处理元素
关键要分清两个对象：
-
e.target：用户真正点击的那个子节点（比如某个
<button>） -
e.currentTarget：当前执行监听函数的父元素（比如你绑定事件的
<div id="list">） - 误用
e.currentTarget取内容会拿错——它始终是父容器，不是你点的那个子项
动态新增子节点也无需重新绑定
因为监听的是父级，所有未来插入的新子节点，只要触发点击，照样能冒泡上来被处理：
- 用
parent.appendChild(newLi)或innerHTML += '<li>新条目</li>'添加节点 - 新节点不需要再调用
addEventListener - 只要结构符合（比如仍是父容器下的可点击子元素），原监听函数就能识别并处理
必要时阻止冒泡或默认行为
某些场景下要控制传播范围或取消默认动作：
- 如果子节点是链接（
<a href="#">），点击后页面跳转，用e.preventDefault()阻止 - 如果父级和更外层还有同类型监听器，不希望它们也被触发，用
e.stopPropagation() - 注意：
stopPropagation()不影响同一级其他监听器，只阻断向上传播
