JavaScript事件响应由事件循环与队列决定：交互事件入队，调用栈空时执行；宏任务与微任务分层处理；动态元素需委托监听；stopPropagation与preventDefault作用不同；事件对象仅在回调中有效。
事件循环与事件队列如何决定响应时机
JavaScript 是单线程的，用户点击、键盘输入等交互行为不会立刻执行回调，而是先被浏览器写入事件队列；只有当调用栈为空时，事件循环才会从队列中取出一个任务执行。这意味着即使你给按钮绑定了 onclick，如果主线程正忙于一个长循环（比如 while(true)），点击也不会被响应——不是“没监听”，而是“排不上队”。
- 宏任务（如
setTimeout、用户事件）和微任务（如Promise.then）在队列中分层处理，微任务总在每次宏任务结束后清空 - 高频事件（如
mousemove、scroll）可能被节流或合并，浏览器不保证每个原生事件都触发一次回调 - 使用
requestIdleCallback可以在主线程空闲时响应低优先级交互，避免阻塞用户操作
addEventListener 与 onxxx 属性的根本区别
addEventListener 支持同一事件绑定多个处理函数，而 onclick 这类内联属性只能保留最后一个赋值。更重要的是：onxxx 属性值必须是函数，若赋值为非函数（比如字符串或 null），会静默失败或清空监听；而 addEventListener 对参数类型校验更严格，传错类型会直接抛 TypeError。
-
addEventListener('click', handler, { once: true })可自动解绑，适合只响应一次的操作 -
addEventListener('click', handler, { passive: true })告诉浏览器该事件不会调用preventDefault()，提升滚动等手势性能（尤其在移动端） - 用
removeEventListener解绑时，必须传入与绑定时**完全相同**的函数引用，匿名函数无法被移除
事件冒泡阶段怎样被意外阻止
调用 event.stopPropagation() 会阻止事件继续向父元素传播，但常被误用于“阻止默认行为”——这是两个独立机制。event.preventDefault() 才负责取消链接跳转、表单提交等默认动作。混淆二者会导致：本想禁用表单提交，却写了 stopPropagation，结果提交照常发生；或者本想阻止父容器响应点击，却只调了 preventDefault，事件仍会冒泡上去。
- 检查是否在某个中间元素上无意调用了
stopPropagation，导致外层监听器收不到事件 -
event.stopImmediatePropagation()更激进：它不仅阻止冒泡，还阻止同一元素上其他同类型监听器执行 - 用
event.composedPath()查看当前事件实际经过的节点路径，调试 Shadow DOM 场景下的冒泡异常
怎样正确监听动态插入的 DOM 元素
对尚未存在的元素直接调用 addEventListener 会无效。常见错误是等 DOMContentLoaded 后批量绑定，但后续通过 innerHTML 或 appendChild 插入的新按钮不会自动拥有事件监听器。解决方案是事件委托：把监听器绑定在稳定存在的父容器上，利用冒泡机制判断目标元素。
立即学习“Java免费学习笔记（深入）”；
document.getElementById('list-container').addEventListener('click', function(e) {
if (e.target.classList.contains('delete-btn')) {
// 真正要处理的逻辑
e.target.closest('li').remove();
}
});
- 委托目标要选对：父容器不能是
document或body，除非你明确需要全局捕获；优先选离动态元素最近的静态祖先 - 注意
e.target和e.currentTarget的区别：前者是真正被点击的最深子元素，后者才是你绑定监听器的那个父容器 - 现代框架（如 React）的合成事件系统已内置委托，但原生 DOM 操作中必须手动实现
setTimeout 或 fetch 回调）中直接访问 event 会得到 undefined 或过期值，必须提前用变量保存关键属性（如 event.target 或 event.clientX）。 
