最稳做法是将 script 放在 /body 前或用 DOMContentLoaded 事件包裹绑定逻辑；事件委托需校验 e.target；重复绑定会叠加执行，应使用具名函数或 once 选项清理。

addEventListener 绑定事件时元素还没加载完成？

直接在 <script></script> 标签里调用 addEventListener 却没反应，大概率是脚本执行时 DOM 还没就绪。浏览器按 HTML 顺序解析，如果 <script></script> 写在 里，而目标元素在 底部，那 document.getElementById('btn') 就会返回 null。

• 最稳的做法：把 <script></script> 放在 前，确保 DOM 已构建完毕
• 或者用 DOMContentLoaded 事件包裹绑定逻辑：

  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('myBtn').addEventListener('click', handleClick);
  });

• 别依赖 window.onload —— 它等图片、样式表全部加载完，太晚了

click 事件绑到父容器上却收不到子元素触发？

这是事件冒泡没被正确利用。比如给 <div id="list"> 绑 <code>click，但里面动态生成的 <button class="item"></button> 点击无响应，不是事件没触发，而是你没检查 event.target。

• 必须在回调里判断实际点击的是哪个元素：

  list.addEventListener('click', (e) => {
    if (e.target.classList.contains('item')) {
      console.log('点中了 item');
    }
  });

• 避免对每个子元素重复绑定 —— 动态增删元素时，委托到父级更可靠
• 注意：e.target 是真正被点击的元素，e.currentTarget 才是绑定事件的那个（即 list）

同一个元素多次 addEventListener 同一类型事件会怎样？

会叠加执行 —— 每次调用都新增一个监听器，不是覆盖。这容易导致函数被反复调用，比如按钮连点两次就触发四次处理逻辑。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 调试时可打印监听器数量：getEventListeners(document.getElementById('btn'))（仅 Chrome DevTools 控制台可用）
• 解绑要用完全相同的函数引用：element.removeEventListener('click', handler)，匿名函数无法解绑
• 推荐写法：用具名函数 + 明确解绑时机，或用 { once: true } 选项自动清理

  btn.addEventListener('click', doOnce, { once: true });

addEventListener 第三个参数 options 里 capture 和 passive 有什么区别？

capture 控制事件流阶段（捕获 or 冒泡），passive 则是性能提示 —— 告诉浏览器“我不会在该事件里调 preventDefault()”，让滚动/触摸更流畅。

立即学习“前端免费学习笔记（深入）”；

• { capture: true }：事件先从外层向目标传播（捕获阶段），常用于全局拦截，比如防误触
• { passive: true }：主要用在 touchstart / wheel 上；若错误设为 true 却又调了 e.preventDefault()，Chrome 会报警告甚至忽略该调用
• 两者可共存：{ capture: true, passive: false }

真实项目里最容易漏掉的是事件委托时没做 target 类型校验，或者反复绑定却没清理。尤其是 SPA 页面切换、组件复用场景，监听器残留比想象中更常见。