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

问题描述

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

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

解决方法

根据MDN Web文档，第三个参数是： useCapture 如果true，useCapture表示用户希望启动捕获。启动后捕获指定事件的所有事件类型将分派给先注册listener 派遣到下方的任何ѭ4 它在DOM树中。活动是穿过树向上冒泡不触发指定给使用捕获。查看DOM 3级事件详细说明。 ,我也检查了MDN，但我仍然不明白ѭ2的含义，因此该答案适用于那些在查阅了官方文档后仍然不了解它的人。因此，首先，几乎所有浏览器都发生以下情况：在所有浏览器中，除IE <9外，事件处理分为两个阶段。事件首先下降-称为捕获，然后上升。 W3C规范中对此行为进行了规范化处理。这意味着无论您将“ 2”设置为什么，这两个事件阶段始终存在。这张照片显示了它是如何工作的。根据此模型，事件：向下捕获-通过1-> 2-> 3。冒泡-通过3-> 2-> 1。然后是你的问题。第三个参数称为“ 2”，指示您希望处理程序在两个阶段中的哪个阶段上处理事件。 useCapture = true 处理程序设置在捕获阶段。在到达孩子之前，将有很多事情发生。 useCapture = false。处理程序设置在冒泡阶段。到达孩子之后，事件就会发生。这意味着如果您编写如下代码：

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

单击子元素时，将在second之前调用first方法。默认情况下，“ 2”标志设置为false，这意味着将仅在事件冒泡阶段调用处理程序。有关详细信息，请单击此参考链接和此。 ,@Libra的答案非常好，碰巧有一些像我这样的人，他们更了解代码与机器之间的交互。因此，以下脚本应解释事件传播。我要根据此描述架构尝试做的是：以下事件流在以下层次结构中上下移动：

<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>

,它确定事件是否被捕获。更多信息在这里

false false 之后之后使用使用使用函数函数函数在此在此简单简单简单