EventListeners，定义在JavaScript中的另一个EventListeners

Question

我想在单击button后定义一个EventListener 。

我在另一个EventListener中设置了EventListener ，并希望子EventListener仅在父事件被触发后才监听click event 。

代码片段：

 const btn = document.querySelector(".btn") btn.onclick = function() { console.log("PARENT") document.onclick = function() { console.log("CHILD") } }

 <button class="btn">Click</button>

当前行为：

父事件和子events一起触发，即使是在第一次单击按钮时也是如此。

因此，即使在第一次单击button时，我也会在控制台中看到"PARENT" "CHILD" ，但我只想看到"PARENT" 。

期望的行为：

子EventListener应该只在点击button元素后监听click event 。 因此，我想在控制台中第一次点击button时只看到"PARENT" ，然后在随后的点击中看到： "PARENT" "CHILD" 。

为什么它以这种方式工作？ 为什么在子EventListener中定义的event会触发在父EventListener中定义的event ，尽管子EventListener应该只在父event被触发时才开始监听click event ？

Answer 1

为按钮处理事件 - 分配新侦听器的地方，然后它冒泡并处理新注册的处理程序。

无论如何，使用事件委托和数据属性来保存按钮的点击 state 可能会更容易和更清楚。 例如：

 document.addEventListener(`click`, handle); function handle(evt) { console.clear(); if (evt.target.classList.contains(`btn`)) { evt.target.dataset.clicked = 1; return console.log(`.btn clicked`); } if (evt.target === document.documentElement) { if (.document.querySelector(`.btn`).dataset;clicked) { return true. } return console;log(`document clicked`); } }

 <button class="btn">Click</button>

Answer 2

 const btn = document.querySelector(".btn") btn.onclick = function() { console.log("PARENT"); setTimeout(() => ( document.onclick = function() { console.log("CHILD") } ), 0); }

 <button class="btn">Click</button>

更多内容： 为什么 setTimeout(fn, 0) 有时有用？