Question

最后的错误是什么？感谢。

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

Answer 1

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

首先，几乎所有的浏览器都会发生以下情况：

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

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

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

此图显示了它的工作原理。

enter image description here

根据这个模型，事件：

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

气泡 - 通过3 - ＆gt; 2 - ＆gt; 1。

然后是你的问题。名为useCapture的第3个参数表示您希望处理程序处理事件的两个阶段中的哪个阶段。

useCapture = true

处理程序设置在捕获阶段。在遇到孩子之前，事情就会发生。

useCapture = false。

处理程序设置在冒泡阶段。在找到孩子之后，活动就会到达。

这意味着如果您编写如下代码：

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

点击子元素时，first之前会调用second方法。

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

有关详细信息，请click this reference link和this。

Answer 2

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

<强>将useCapture
如果true，useCapture表示用户希望发起捕获。启动后捕获，指定的所有事件类型将被发送到在被记录之前注册listener 发送到下面的任何EventTarget 它在DOM树中。事件是向上冒泡通过树会不会触发指定的侦听器使用捕获。见DOM Level 3 Events 有详细解释。

Answer 3

@ Libra的回答非常好，恰好有些像我这样的人更了解代码与机器的互动。
因此，以下脚本应该解释事件传播。基于这个description schema我想做的是：
事件向下流动并向上流动以下层次结构：

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

为了简单起见，我们将从主体开始向下注册处理阶段的span元素注册处理程序，然后返回到body元素注册处理程序以进行冒泡阶段。因此，结果将逐个节点地指示事件从开始到结束所采用的方向。请单击代码段右侧面板上的“显示控制台”以访问日志

    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>

请注意焦点等事件不会起泡，这使得感觉仍然是大多数事件都会冒泡。

Answer 4

确定是否捕获事件。

更多信息here

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

4 个答案: