javascript - JS 事件冒泡防止复选框选中状态

Question

我试图了解事件冒泡和事件隧道（在 Javascript 中捕获）之间的区别。

在 wpf 中，您必须在事件到达控件之前处理事件。在 js 中似乎并非如此。

为什么捕获真假没有区别？我预计，在底部的示例中选中了该复选框。我不想阻止事件传播，而只是了解这种影响。

document.querySelector("html").addEventListener("click", function(event) {
  document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>";
  event.preventDefault();
}, {
  capture: false
});

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>

标签： javascriptevent-handlingaddeventlistenerdom-events

Answer 1

正如文档所解释的，这个 var 是一个布尔值，指示在传递给下一个元素的事件侦听器之前是否应该将事件传递给当前事件处理程序。只需明白，当您在 js 中触发事件时，它首先会传递给“第一个”元素，并且会越来越深。然后，当它到达最深的元素时，事件将回到第一个元素（我们谈论冒泡）。

这个例子应该可以帮助你理解：

document.getElementsByTagName("input")[0].addEventListener("click", function(event) {
  alert("event from the checkbox");
});

document.getElementsByTagName("body")[0].addEventListener("click", function(event) {
  alert("event from the body");
}, {
  capture: false
});

<p>Please click on the checkbox control.</p>

<form>
  <label for="id-checkbox">Checkbox:</label>
  <input type="checkbox" id="id-checkbox" />
</form>

<div id="output-box"></div>