EventTarget.addEventListener（）＆useCapture参数使用？

Question

我正在研究vanilla JavaScript，我在理解useCapture函数中EventTarget.addEventListener()参数的用法时遇到了一些麻烦。

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

  

useCapture 可选

     

如果为true，则useCapture表示用户希望启动捕获。启动捕获后，指定类型的所有事件   将在发送之前发送给注册的听众   到DOM树下面的任何EventTarget。事件是   向上冒泡树不会触发听众   指定使用捕获。请参阅DOM Level 3事件和JavaScript事件   订购详细说明。如果未指定，请使用捕获   默认为false。

阅读它的文档，我从第一句话中感到困惑。和 试图理解它我已经设置了一个带有三个嵌套元素的小测试页面，在最顶层的两个div上有一个点击监听器。

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

问题：

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

究竟捕获useCapture标志的是什么？

Answer 1

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

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

所以一个更好的例子是同一元素上的两个处理程序，中间（但为了完整性，让我们完成所有三个级别）：

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;