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

10

据MDC，第三个参数是：

将useCapture
如果true，useCapture表明用户希望开始捕获了。启动捕获后，指定类型的所有活动将在DOM树是分派到任何EventTarget小号下方之前被分派到注册listener。通过树向上冒泡的事件将不触发指定为的侦听器使用捕获。有关详细说明，请参阅DOM Level 3 Events 。

来源

2011-04-14 00:33:52

+11

我不知道这么多关于JavaScript，所以我有麻烦得到这个答案。我其实不知道什么是useCapture？请你告诉我一些关于它的事情。 – 2014-01-10 06:25:58

+1

@BikashChandraMondal查看下面的答案。 – libra 2014-11-20 03:21:17

+9

请解释一下，不要只是复制/粘贴。 – 2016-07-26 22:58:53

-6

它确定事件是否被捕获。

更多信息here

来源

2011-04-14 00:35:40 derek

178

我检查MDN太多，但我还是不明白什么useCapture是对，所以这个答案是为那些谁还不在检查的正式文件后得到它。

所以首先，以下在发生几乎所有的browers：

在所有的浏览器，除了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);

点击子元素时

，first方法将被second之前调用。

默认情况下，useCapture标志设置为假这意味着你处理只会事件冒泡阶段时被调用。

详细信息，click this reference link和this。

来源

2014-08-31 10:50:51 libra

+7

非常好，全面的答案。我比现在更了解这一点。 – 0x499602D2 2014-08-31 14:19:24

+10

非常好的解释。人情味，这是什么使差异。 – 2015-04-28 00:54:56

+1

我很欣赏这个解释。 – neilsimp1 2016-04-08 13:21:59

1

@ Libra的答案非常好，只是碰巧有些像我这样的人更好地理解代码与机器的交互。
所以下面的脚本应该解释事件传播。我试图做这个基础是description schema：
以下事件流下来，上了以下层次：

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

为了简单起见，我们将开始在身体下到span元素注册捕获阶段的处理程序，并返回到冒泡阶段注册处理程序的主体元素。所以结果将是节点从节点开始到结束所采取的方向。请点击片段的右侧面板上的“显示控制台”访问日志

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>

注意的事件，如重点不冒泡，这使得SENS他仍然多数事件做泡沫。

来源

2017-08-22 22:22:11 user10089632

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

回答

相关问题