事件

定义用户或系统与页面交互时触发的信号，通过监听器响应以驱动页面行为

事件是网页交互的基石：点击、输入、滚动、提交、键盘……浏览器把交互封装成事件对象，通过 addEventListener 注册的监听器响应。现代事件模型分捕获、目标、冒泡三个阶段，绝大多数业务代码工作在冒泡阶段。

事件委托是必须掌握的技巧：不在每个子元素上绑监听，而是绑在共同父容器上，利用 event.target 判断来源——动态新增的子元素自动生效，监听器数量从 N 个降到 1 个。

e.preventDefault() 阻止默认行为（表单提交、链接跳转）；
e.stopPropagation() 阻止冒泡，谨慎使用；
移除监听需要同一个函数引用，匿名函数卸不掉。

JavaScript

// 事件委托：整个列表一个监听器
list.addEventListener('click', e => {
  const btn = e.target.closest('.del');
  if (!btn) return;
  btn.closest('li').remove();
});

form.addEventListener('submit', e => {
  e.preventDefault();          // 阻止表单跳转
  console.log(new FormData(e.target));
});

⚠ 常见误区

passive: true 提升滚动性能，但里面不能 preventDefault
scroll/touchmove 高频事件必须节流
移除监听传同名函数引用，匿名函数无法移除

🔗 相关词条事件监听事件冒泡事件委托 addEventListener