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>

Answer 1

如文档中所述，此 var 是一个 bool 值，指示在传递给下一个元素的事件监听器之前是否应将事件传递给当前事件处理程序。只要明白，当你在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>