事件冒泡和捕获有什么区别？什么时候应该使用冒泡和捕获？
什么是事件冒泡和捕获？
IT技术
javascript
dom-events
event-bubbling
2020-12-24 01:15:22
6个回答
事件冒泡和捕获是 HTML DOM API 中事件传播的两种方式，当一个事件发生在另一个元素内的元素中，并且两个元素都为该事件注册了一个句柄时。事件传播模式决定了元素接收事件的顺序。
使用冒泡，事件首先被最里面的元素捕获和处理，然后传播到外部元素。
通过捕获，事件首先被最外层元素捕获并传播到内部元素。
捕获也称为“涓流”，它有助于记住传播顺序：
涓涓细流，冒泡
过去，Netscape 提倡事件捕获，而 Microsoft 则提倡事件冒泡。两者都是 W3C文档对象模型事件标准 (2000) 的一部分。
IE < 9只使用事件冒泡，而 IE9+ 和所有主流浏览器都支持。另一方面，对于复杂的 DOM ，事件冒泡的性能可能会稍低一些。
我们可以addEventListener(type, listener, useCapture)在冒泡（默认）或捕获模式下使用来注册事件处理程序。要使用捕获模型，将第三个参数作为true.
例子
<div>
<ul>
<li></li>
</ul>
</div>
在上面的结构中，假设li元素中发生了单击事件。
在捕获模型中，事件将由div第一个处理（将首先div触发中的单击事件处理程序），然后是ul，然后是目标元素中的最后一个li。
在冒泡模型中，将发生相反的情况：事件将首先由 处理li，然后由处理ul，最后由div元素处理。
有关更多信息，请参阅
- QuirksMode 上的事件顺序
- 的addEventListener上MDN
- QuirksMode 上的高级事件
在下面的示例中，如果单击任何突出显示的元素，您可以看到事件传播流的捕获阶段首先发生，然后是冒泡阶段。
var logElement = document.getElementById('log');
function log(msg) {
logElement.innerHTML += ('<p>' + msg + '</p>');
}
function capture() {
log('capture: ' + this.firstChild.nodeValue.trim());
}
function bubble() {
log('bubble: ' + this.firstChild.nodeValue.trim());
}
function clearOutput() {
logElement.innerHTML = "";
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}
var clearButton = document.getElementById('clear');
clearButton.addEventListener('click', clearOutput);p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button id="clear">clear output</button>
<section id="log"></section>描述：
quirksmode.org对此有很好的描述。简而言之（从 quirksmode 复制）：
事件捕捉
使用事件捕获时
| | ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 \ / | | | ------------------------- | | Event CAPTURING | -----------------------------------element1 的事件处理程序首先触发，element2 的事件处理程序最后触发。
事件冒泡
当你使用事件冒泡时
/ \ ---------------| |----------------- | element1 | | | | -----------| |----------- | | |element2 | | | | | ------------------------- | | Event BUBBLING | -----------------------------------element2 的事件处理程序首先触发，element1 的事件处理程序最后触发。
用什么？
这取决于你想做什么。没有更好的了。不同之处在于事件处理程序的执行顺序。大多数情况下，在冒泡阶段触发事件处理程序是没问题的，但也可能需要更早地触发它们。
如果有两个元素，元素 1 和元素 2。元素 2 位于元素 1 内，我们为这两个元素附加一个事件处理程序，比如 onClick。现在，当我们单击元素 2 时，将执行这两个元素的 eventHandler。现在的问题是事件将按什么顺序执行。如果与元素 1 相关联的事件首先执行，则称为事件捕获，如果与元素 2 相关联的事件首先执行，则称为事件冒泡。根据 W3C，事件将在捕获阶段开始，直到到达目标返回元素，然后开始冒泡
捕获和冒泡状态由 addEventListener 方法的 useCapture 参数知道
eventTarget.addEventListener(type,listener,[,useCapture]);
默认 useCapture 为 false。这意味着它处于冒泡阶段。
var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
div1.addEventListener("click", function (event) {
alert("you clicked on div 1");
}, true);
div2.addEventListener("click", function (event) {
alert("you clicked on div 2");
}, false);#div1{
background-color:red;
padding: 24px;
}
#div2{
background-color:green;
}<div id="div1">
div 1
<div id="div2">
div 2
</div>
</div>请尝试更改真假。
我发现javascript.info上的本教程非常清楚地解释了这个主题。而它最后的三点总结，真的是说到要害了。我在这里引用：
- 事件首先被捕获到最深的目标，然后冒泡。在 IE<9 中，它们只会冒泡。
- 除了
addEventListener最后一个参数外true，所有处理程序都在冒泡阶段工作 ，这是在捕获阶段捕获事件的唯一方法。event.cancelBubble=true(IE) 或event.stopPropagation()其他浏览器可以停止冒泡/捕获。
还有一个Event.eventPhase属性可以告诉您事件是在目标还是来自其他地方，并且浏览器完全支持它。
从已接受的答案中扩展已经很棒的片段，这是使用eventPhase属性的输出
var logElement = document.getElementById('log');
function log(msg) {
if (logElement.innerHTML == "<p>No logs</p>")
logElement.innerHTML = "";
logElement.innerHTML += ('<p>' + msg + '</p>');
}
function humanizeEvent(eventPhase){
switch(eventPhase){
case 1: //Event.CAPTURING_PHASE
return "Event is being propagated through the target's ancestor objects";
case 2: //Event.AT_TARGET
return "The event has arrived at the event's target";
case 3: //Event.BUBBLING_PHASE
return "The event is propagating back up through the target's ancestors in reverse order";
}
}
function capture(e) {
log('capture: ' + this.firstChild.nodeValue.trim() + "; " +
humanizeEvent(e.eventPhase));
}
function bubble(e) {
log('bubble: ' + this.firstChild.nodeValue.trim() + "; " +
humanizeEvent(e.eventPhase));
}
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', capture, true);
divs[i].addEventListener('click', bubble, false);
}p {
line-height: 0;
}
div {
display:inline-block;
padding: 5px;
background: #fff;
border: 1px solid #aaa;
cursor: pointer;
}
div:hover {
border: 1px solid #faa;
background: #fdd;
}<div>1
<div>2
<div>3
<div>4
<div>5</div>
</div>
</div>
</div>
</div>
<button onclick="document.getElementById('log').innerHTML = '<p>No logs</p>';">Clear logs</button>
<section id="log"></section>其它你可能感兴趣的问题