Question

我对eventlistener概念有疑问。下面两个代码之间的区别是什么我对true / false部分有疑问。当我用练习代码中的第二个代码替换第一个代码时，没有发生任何变化。

a.addEventListener("click", modifyText, true);
a.addEventListener("click", modifyText, false);

Answer 1

addEventListener中的true和false是布尔值，用于指定是否需要捕获事件。

这是语法和detail：

object.addEventListener (eventName, function, useCapture);

eventName：指定要侦听的事件名称的字符串。此参数区分大小写！

function：表示事件发生时要调用的事件侦听器函数。发生事件时，将初始化事件对象并将其作为第一个参数传递给事件处理程序。事件对象的类型取决于当前事件。

useCapture：布尔值，指定是否需要捕获事件。以下值之一：

false -> Register the event handler for the bubbling phase. 
true -> Register the event handler for the capturing phase.

鼓泡和捕捉阶段：

冒泡：事件对象以相反的顺序传播通过目标的祖先，从目标的父级开始，以defaultView结束。该阶段也称为起泡阶段。在此阶段注册的事件侦听器必须在事件达到其目标后处理该事件。

捕获：事件对象必须通过目标的祖先从defaultView传播到目标的父级。该阶段也称为捕获阶段。在此阶段注册的事件侦听器必须在事件到达其目标之前处理该事件。

有关活动流程的更多详情： DOM Event Architecture

Answer 2

只需查看一些文档，例如MDN on addEventListener：

target.addEventListener(type, listener[, useCapture]);

<强>将useCapture

如果为true，则useCapture表示用户希望启动捕获。启动捕获后，指定类型的所有事件将被分派到已注册的侦听器，然后再分派到DOM树中它下面的任何EventTarget。向上冒泡树的事件不会触发指定使用捕获的侦听器。有关详细说明，请参阅DOM Level 3 Events。请注意，此参数在所有浏览器版本中都不是可选的。如果未指定，则useCapture为false。

所以基本上它决定事件是否在capture or the bubble phase的事件处理中处理。

只要元素的父母（或孩子）没有附加任何类似的事件，就没有真正的区别。

javascript eventlistener中true和false的区别

2 个答案: