我读过https://developer.mozilla.org/en/DOM/element.addEventListener上的文章，但无法理解useCapture属性。定义如下:
如果为true, useCapture表示用户希望发起捕获。在启动捕获之后，指定类型的所有事件将被分派到已注册侦听器，然后再分派到DOM树中它下面的任何EventTargets。在树中向上冒泡的事件不会触发指定使用capture的侦听器。
在这段代码中，父事件在子事件之前触发，所以我无法理解它
的行为。文档对象的usecapcapture设置为true，子div的usecapcapture设置为false，文档usecapcapture紧随其后。为什么document property优先于child。
函数load() {
文档。addEventListener("click"， function() {
警报(“父事件”);
},真正的);
. getelementbyid(“div1”)。addEventListener("click"， function() {
警报(“孩子事件”);
},假);
｝
<身体onload = " load ()" >
<div id="div1">点击我</div>
身体< / >
捕获事件(useCapture = true) vs泡沫事件(useCapture = false)
MDN参考
Capture Event将在Bubble Event之前分派
事件传播顺序为
父母捕获
孩子捕捉
目标捕获和目标气泡
按登记的顺序
当元素是事件的目标时，useCapture参数不重要(谢谢@bam和@legend80s)
孩子泡沫
父母泡沫
stopPropagation()将停止流
Demo
结果:
父母捕获
目标泡沫1
(因为目标的捕获和气泡将按照它们注册的顺序触发，所以这是优先触发)
目标捕获
目标泡沫2
父母泡沫
var parent = document.getElementById('parent');
var target = document.getElementById('target');
// "target" will trigger in the order of register (addEventListener()), capture / bubble don't affect the order
// #2
target.addEventListener('click', function (e) {
console.log('Target Bubble 1');
// e.stopPropagation();
}, false);
// #3
target.addEventListener('click', function (e) {
console.log('Target Capture');
// e.stopPropagation();
}, true);
// #4
target.addEventListener('click', function (e) {
console.log('Target Bubble 2');
// e.stopPropagation();
}, false);
// #1 : "parent capture" first
parent.addEventListener('click', function (e) {
console.log('Parent Capture');
// e.stopPropagation();
}, true);
// #5 : "parent bubble" last
parent.addEventListener('click', function (e) {
console.log('Parent Bubble');
// e.stopPropagation();
}, false);
<div id="parent">
<button id="target" style="padding: 1em 0.8em;">
Trigger event
</button>
</div>
我发现这张图对于理解捕获/目标/气泡阶段非常有用:
http://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases
下面是从链接中提取的内容。
阶段
事件按照从树的根到目标节点的路径分派。然后，可以在目标节点级别本地处理它，也可以从树中更高级别的任何目标的祖先处理它。事件分派(也称为事件传播)发生在三个阶段，顺序如下:
捕获阶段:事件被分派到目标的祖先
从树的根到目标节点的直接父节点。
目标阶段:事件被分派到目标节点。
冒泡阶段:事件被分派到目标阶段
从目标节点的直接父节点到根节点的祖先
这棵树。
目标的祖先在事件的初始分派之前确定。如果在调度期间删除了目标节点，或者添加或删除了目标的父节点，则事件传播将始终基于调度之前确定的目标节点和目标的父节点。
有些事件可能不一定完成DOM事件流的三个阶段，例如，事件只能为一个或两个阶段定义。例如，本规范中定义的事件将始终完成捕获和目标阶段，但有些事件不会完成冒泡阶段(“冒泡事件”与“非冒泡事件”，请参见事件。泡沫属性)。
