JavaScript事件机制是浏览器主动通知代码的通信方式，依赖事件循环、队列及监听器协作；事件按捕获→目标→冒泡三阶段传播；addEventListener支持多监听、精确控制，onclick仅单绑定；event.target与currentTarget易混淆，事件委托更高效。
JavaScript 事件机制不是“一套固定流程”，而是浏览器在用户交互或运行时状态变化时，主动通知代码的通信方式。它依赖于事件循环、事件队列和目标对象上的事件监听器协作完成，不是靠轮询或手动触发。
事件是怎么被浏览器捕获并派发的
当用户点击按钮、键盘按下、页面加载完成，浏览器内核会生成一个 Event 对象，并按 DOM 树结构从外向内（捕获阶段）再由内向外（冒泡阶段）传播。这个过程默认启用冒泡，但可被 stopPropagation() 中断；捕获需显式传 true 给 addEventListener() 第三个参数。
- 每个可交互的 DOM 节点都内置了事件处理能力，不需要手动“开启”
-
click、input、load等是标准事件类型，大小写敏感，不能拼错 - 自定义事件要用
new CustomEvent()构造，且必须用dispatchEvent()主动触发 - 异步操作（如
fetch完成）不会自动触发 DOM 事件，得自己dispatchEvent
addEventListener 和 onclick 的关键区别
onclick 是元素的属性，只能绑定一个处理函数；addEventListener() 是方法，支持同一事件绑定多个监听器，且可精确控制捕获/冒泡阶段、是否只执行一次等行为。
-
onclick = handler会覆盖之前赋值，而addEventListener('click', handler)可叠加 - 移除时必须用相同引用：如果传的是匿名函数，就永远无法
removeEventListener - 想只执行一次，直接用
{ once: true }选项，比手动removeEventListener更可靠 -
onclick属性值只能是函数或null，不能是字符串（HTML 中的onclick="..."是历史遗留，不推荐）
事件对象 event 常用属性和陷阱
传给监听器的第一个参数就是 event，它不只是记录“哪个键被按了”，还携带了事件流位置、默认行为控制权、以及兼容性差异明显的属性。
-
event.target是实际触发事件的元素（可能嵌套很深），event.currentTarget才是当前绑定监听器的那个元素 -
event.preventDefault()阻止默认行为（如表单提交、链接跳转），但对自定义事件无效 -
event.stopPropagation()阻止继续传播，stopImmediatePropagation()还会阻止同级其他监听器执
行
- 老版本 IE 用
window.event，现代代码应统一用形参event，避免兼容性判断
真正容易出问题的不是“怎么绑事件”，而是没理清 target 和 currentTarget 的区别，或者在事件委托时误判了触发源。复杂 UI 中，一个父容器监听 click 后再用 event.target.matches('.btn') 判断具体按钮，比给几十个按钮分别绑定更轻量也更健壮。
