蝴蝶不菲
事件冒泡和捕获是HTML DOM API中事件传播的两种方式，当事件发生在另一个元素内的元素中时，两个元素都已为该事件注册了句柄。事件传播模式确定元素接收事件的顺序。通过冒泡，事件首先被最内层元素捕获并处理，然后传播到外部元素。通过捕获，事件首先由最外层元素捕获并传播到内部元素。捕获也称为“滴流”，这有助于记住传播顺序：涓涓细流，泡沫起来在过去，Netscape主张事件捕获，而微软则推动事件冒泡。两者都是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上的事件顺序MDN上的addEventListenerQuirksMode上的事件高级在下面的示例中，如果单击任何突出显示的元素，您可以看到事件传播流的捕获阶段首先发生，然后是冒泡阶段。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>JSFiddle的另一个例子。