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

最后的错误是什么? 谢谢。

window.addEventListener('load', function() {
alert("All done");
}, false);
47780 次浏览
小开

根据 MDN 网络文档，第三个参数是:

useCapture
如果 true，则 useCapture表示用户希望 启动捕捉，启动之后 捕获指定的 类型将被分派到 注册为 listener 发送到下面的 EventTarget 事件 通过树木向上冒泡 而不是触发指定为 使用捕获。参见 DOM 第3级事件 详细解释。

小开
最佳答案

我也检查了 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);

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

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

详细信息，点击这个参考链接和 this。

小开

@Libra's answer is very good, there just happen to be some people like me who understand better the interaction of the code with the machine.
因此，下面的脚本应该解释事件传播。 基于 描述模式我试图做的是:
下面的事件流向下和向上以下层次结构:

<window>
<document>
<body>
<section>
<div>
<paragraph>
<span>

For the sake of simplicity we'll start at the body down to the span element registering handlers for the capturing phase, and back up to the body element registering handlers for the bubbling phase. 因此，结果将是事件从开始到结束所采取的方向的一个节点一个节点。 Please click "Show console " on the right panel of the snippet to access the logs

    function handler(e){
/* logs messages of each phase of the event flow associated with
the actual node where the flow was passing by */


if ( e.eventPhase == Event.CAPTURING_PHASE ){
console.log ("capturing phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.AT_TARGET){
console.log( "at target phase :\n actual node : "+this.nodeName);
}
if ( e.eventPhase == Event.BUBBLING_PHASE){
console.log ("bubbling phase :\n actual node : "+this.nodeName );
}
}


/* The following array contains the elements between the target (span and you can
click also on the paragraph) and its ancestors up to the BODY element, it can still
go up to the "document" then the "window" element, for the sake of simplicity it is
chosen to stop here at the body element
*/


arr=[document.body,document.getElementById("sectionID"),
document.getElementById("DivId"),document.getElementById("PId"),
document.getElementById("spanId")];


/* Then trying to register handelers for both capturing and bubbling phases
*/
function listener(node){
node.addEventListener( ev, handler, bool )
/* ev :event (click), handler : logging the event associated with
the target, bool: capturing/bubbling phase */
}
ev="click";
bool=true; // Capturing phase
arr.forEach(listener);
bool=false; // Bubbling phase
/* Notice that both capturing and bubbling
include the at_target phase, that's why you'll get two `at_target` phases in
the log */
arr.forEach(listener);
        p {
background: gray;
color:white;
padding: 10px;
margin: 5px;
border: thin solid black
}
span {
background: white;
color: black;
padding: 2px;
cursor: default;
}
    <section ID="sectionID">
<div  id="DivId">
<p id="PId">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis <span id="spanId">CLICK ME </span> imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosq.
</p>
</div>
</section>

请注意，焦点等事件不会出现泡沫，这意味着大多数事件仍然会出现泡沫。


提交答案