javascript - EventTarget.addEventListener()的useCapture参数使用吗？

我正在研究普通的JavaScript，并且在理解useCapture函数中此EventTarget.addEventListener()参数的用途时遇到了一些麻烦。

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener


  useCapture可选
  
  如果为true，useCapture指示用户希望启动捕获。启动捕获后，所有指定类型的事件
  在分派之前将分派给注册的侦听器
  到DOM树中其下的任何EventTarget。活动是
  在树上冒泡不会触发监听器
  指定使用捕获。请参阅DOM 3级事件和JavaScript事件
  订购详细说明。如果未指定，请使用useCapture
  默认为false。


阅读它的文档，第一句话让我很困惑。和
为了理解它，我已经设置了一个带有三个嵌套元素的小测试页，在两个最顶部的div上都有一个点击监听器。

代码 ：

var treeTopEl = document.getElementById('container');
var treeMiddleEl = document.getElementById('wrapper');

var output = document.getElementById('output');

var treeTopElListener = function(event){
 var elId = event.target.id;
 output.innerHTML += "\nListener on the top element was triggerd,\n\t The event target id is : "+elId;
};

var treeMiddleElListener = function(event){
 var elId = event.target.id;
 output.innerHTML += "\nListener on the middle element was triggerd,\n\tThe event target id is : "+elId;
};

treeTopEl.addEventListener('click', treeTopElListener, false);
treeMiddleEl.addEventListener('click', treeMiddleElListener, true);

#container, #wrapper {
  padding : 20px;
  border : 1px solid green;
}

<div id="container">
 <div id="wrapper">
   <button id="testBtn">A button</button>

 </div>
</div>
<pre id="output"></pre>

问题：

当您单击按钮时，无论useCapture配置如何，都将以相同的顺序触发两个监听器：都true;第一个false，第二个true；第一个false，第二个false。

究竟捕获了true标志？

最佳答案

我认为来自the DOM events specification的这张图几乎说明了一切：



基本上：useCapture参数用于在捕获阶段而不是冒泡阶段期间接收通知。捕获阶段处理程序将在任何冒泡阶段处理程序之前调用。请注意，Internet Explorer在IE9之前不支持捕获阶段。

因此，一个更好的示例是在同一个元素的中间有两个处理程序（但为了完整起见，我们需要对这三个级别进行处理）：

hook("container", "- ");
hook("wrapper",   "  - ");
hook("testBtn",   "    - ");

function hook(id, prefix) {
  var element = document.getElementById(id);
  element.addEventListener("click", function(e) {
    display(id + "'s capturing handler called", prefix);
  }, true);
  element.addEventListener("click", function(e) {
    display(id + "'s bubbling called", prefix);
  }, false);
}

function display(msg, prefix) {
  var p = document.createElement('p');
  p.innerHTML = (prefix || "") + msg;
  document.body.appendChild(p);
}

#container, #wrapper {
  padding : 10px;
  border : 1px solid green;
}
p {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

<div id="container">
 <div id="wrapper">
   <button id="testBtn">A button</button>
 </div>
</div>

关于javascript - EventTarget.addEventListener()的useCapture参数使用吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30683776/