为什么在这个简单的 addEventListener 函数之后使用“false”？

javascript

2022-08-30 05:01:45

最后的虚假是什么意思？谢谢。

window.addEventListener('load', function() {
  alert("All done");
}, false);

答案 1

我也检查了MDN，但我仍然不明白它的用途，所以这个答案是为那些在检查官方文档后仍然没有得到它的人提供的。useCapture

因此，首先，以下情况几乎发生在所有浏览器上：

在所有浏览器中，除了 IE<9 之外，事件处理有两个阶段。

事件首先下降 - 这称为捕获，然后冒泡。此行为在 W3C 规范中是标准化的。

这意味着无论您设置什么，这两个事件阶段始终存在。useCapture

这张图片显示了它是如何工作的。

enter image description here

根据此模型，事件：

向下捕获 - 通过 1 -> 2 -> 3。

气泡 - 通过3 -> 2 -> 1。

然后是你的问题。调用的第三个参数指示您希望处理程序在两个阶段中的哪个阶段处理事件。useCapture

useCapture = true

处理程序在捕获阶段设置。事件将在到达其孩子之前到达它。

useCapture = false.

处理程序设置在冒泡阶段。事件将在到达它的孩子之后到达它。

这意味着如果你像这样编写代码：

child.addEventListener("click", second);
parent.addEventListener("click", first, true);

单击子元素时，将在之前调用方法。firstsecond

默认情况下，该标志设置为 false，这意味着您的处理程序将仅在事件冒泡阶段被调用。useCapture

有关详细信息，请单击此参考链接和此链接。

答案 2

根据MDN Web Docs，第三个参数是：

如果使用捕获
，指示用户希望启动捕获。启动捕获后，指定类型的所有事件都将分派给已注册的事件，然后再分派到 DOM 树中其下方的任何事件。通过树向上冒泡的事件不会触发指定使用 capture 的侦听器。有关详细说明，请参阅 DOM 级别 3 事件。trueuseCapturelistenerEventTarget