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是一个布尔值，指示在传递给下一个元素的事件侦听器之前是否应将事件传递给当前事件处理程序。只需了解一下，当您在js中触发事件时，该事件会先传递给“ first”元素，然后会越来越深入。然后，当事件到达最深层时，事件将回到第一个事件（我们谈论起泡）。

此示例应帮助您理解：

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>

Answer 2

引用MDN useCapture选项仅影响事件在DOM树下传播的顺序。

布尔值，指示此类型的事件在分派给DOM树中其下的任何EventTarget之前是否将分派给已注册的侦听器。

您的代码段只有一个事件侦听器时，您确实不会注意到任何可观察到的效果。但是，如果您添加另一个，即

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
    document.getElementById("output-box").innerHTML += "Checkbox capture";       
});

您将注意到执行顺序如何根据外部处理程序捕获选项而变化。如果要选中此复选框，则可以这样使用。

document.querySelector("#id-checkbox").addEventListener("click", function(event) {
    event.stopPropagation();    
    document.getElementById("output-box").innerHTML += "Checkbox capture";       
});

此处stopPropagation防止事件冒泡。因此，事件不会在DOM树中处理，preventDefault也不会被调用。如果只想执行上层处理程序，则可以使用

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

此处capture: true和stopPropagation的组合可防止在DOM树下捕获事件。

JS事件冒泡可防止复选框处于选中状态

2 个答案: