JavaScript嵌套EventListener触发异常：首次点击同时触发父子事件原因咨询

这是个典型的事件冒泡导致的问题，我来帮你拆解清楚来龙去脉：

问题根源 #

当你点击按钮时，浏览器的事件流会按以下顺序运行：

1. 点击事件首先触发按钮的click处理函数，也就是你输出"PARENT"的代码。
2. 这个函数执行时，你立刻给document绑定了新的click事件处理函数。
3. 但此时当前的点击事件还没有完全结束——它会沿着DOM树向上冒泡，路径是按钮→body→html→document。
4. 当事件冒泡到document时，你刚绑定的处理函数已经存在，所以会立刻执行，输出"CHILD"。

简单说就是：绑定子事件的动作发生在当前点击事件的冒泡过程中，事件还没走完整个流程，新绑定的监听就被触发了，所以首次点击会同时输出两个日志。

解决方案 #

要实现「首次仅输出PARENT，后续点击同时输出」的效果，我们需要让document的click监听在当前点击事件的冒泡流程结束后再绑定。最简单的实现方式是用setTimeout把绑定逻辑延迟到下一个事件循环：

const btn = document.querySelector(".btn")
btn.onclick = function() {
  console.log("PARENT")
  // 延迟到当前事件循环结束后再绑定document的点击事件
  setTimeout(() => {
    document.onclick = function() {
      console.log("CHILD")
    }
  }, 0)
}

这样当前点击事件会先完成整个冒泡流程（此时document还没绑定监听，不会触发CHILD），等下一个事件循环启动时，才给document绑定监听，后续的点击就会同时触发两个事件了。

如果想更规范地管理事件监听（方便后续移除避免内存泄漏），建议用addEventListener和removeEventListener组合：

const btn = document.querySelector(".btn")
const childClickHandler = () => console.log("CHILD")

btn.addEventListener('click', () => {
  console.log("PARENT")
  setTimeout(() => {
    document.addEventListener('click', childClickHandler)
  }, 0)
})

// 后续需要移除监听时调用：
// document.removeEventListener('click', childClickHandler)

内容的提问来源于stack exchange，提问作者MichaelLearner