什么是事件冒泡和捕获？

Question

事件冒泡和捕获之间有什么区别？在这两个中，哪个是更快更好的模型？

Answer 1

事件冒泡和捕获是HTML DOM API中事件传播的两种方式，当事件发生在另一个元素内的元素中时，两个元素都已为该事件注册了句柄。事件传播模式确定元素接收事件的顺序。通过冒泡，事件首先被最内层元素捕获并处理，然后传播到外部元素。通过捕获，事件首先由最外层元素捕获并传播到内部元素。捕获也称为“滴流”，这有助于记住传播顺序：涓涓细流，泡沫起来在过去，Netscape主张事件捕获，而微软则推动事件冒泡。两者都是W3C&nbsp;文档对象模型事件标准（2000）的一部分。IE <9&nbsp;仅使用事件冒泡，而IE9 +和所有主要浏览器都支持这两种情况。另一方面，对于复杂的DOM&nbsp;，事件冒泡的性能可能略低。我们可以使用addEventListener(type, listener, useCapture)注册事件处理程序来进行冒泡（默认）或捕获模式。要使用捕获模型，请将第三个参数传递为true。例<div> &nbsp;&nbsp;&nbsp;&nbsp;<ul> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li></li> &nbsp;&nbsp;&nbsp;&nbsp;</ul></div>在上面的结构中，假设li元素中发生了单击事件。在捕获模型中，事件将由div第一个事件处理（首先点击事件处理程序div），然后ul是目标元素中的最后一个事件处理器li。在冒泡模型中，会发生相反的情况：事件首先由元素处理li，然后由元素处理ul，最后由div元素处理。有关更多信息，请参阅QuirksMode上的事件顺序MDN上的addEventListenerQuirksMode上的事件高级在下面的示例中，如果单击任何突出显示的元素，您可以看到事件传播流的捕获阶段首先发生，然后是冒泡阶段。var logElement = document.getElementById('log');function log(msg) {&nbsp; &nbsp; logElement.innerHTML += ('<p>' + msg + '</p>');}function capture() {&nbsp; &nbsp; log('capture: ' + this.firstChild.nodeValue.trim());}function bubble() {&nbsp; &nbsp; log('bubble: ' + this.firstChild.nodeValue.trim());}function clearOutput() {&nbsp; &nbsp; logElement.innerHTML = "";}var divs = document.getElementsByTagName('div');for (var i = 0; i < divs.length; i++) {&nbsp; &nbsp; divs[i].addEventListener('click', capture, true);&nbsp; &nbsp; divs[i].addEventListener('click', bubble, false);}var clearButton = document.getElementById('clear');clearButton.addEventListener('click', clearOutput);p {&nbsp; &nbsp; line-height: 0;}div {&nbsp; &nbsp; display:inline-block;&nbsp; &nbsp; padding: 5px;&nbsp; &nbsp; background: #fff;&nbsp; &nbsp; border: 1px solid #aaa;&nbsp; &nbsp; cursor: pointer;}div:hover {&nbsp; &nbsp; border: 1px solid #faa;&nbsp; &nbsp; background: #fdd;}<div>1&nbsp; &nbsp; <div>2&nbsp; &nbsp; &nbsp; &nbsp; <div>3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div>5</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div><button id="clear">clear output</button><section id="log"></section>JSFiddle的另一个例子。

Answer 2

如果有两个元素元素1和元素2.元素2在元素1内部，我们附加一个事件处理程序，两个元素让我们说onClick。现在当我们点击元素2时，将执行两个元素的eventHandler。现在问题在于事件将以何种顺序执行。如果首先执行附加了元素1的事件，则称为事件捕获，如果首先执行附加元素2的事件，则称为事件冒泡。根据W3C，事件将在捕获阶段开始，直到它到达目标回到元素然后它开始冒泡捕获和冒泡状态由addEventListener方法的useCapture参数已知eventTarget.addEventListener（类型，听众，[方法，useCapture]）;默认情况下，useCapture为false。这意味着它处于冒泡阶段。var div1 = document.querySelector("#div1");var div2 = document.querySelector("#div2");div1.addEventListener("click", function (event) {&nbsp; alert("you clicked on div 1");}, true);div2.addEventListener("click", function (event) {&nbsp; alert("you clicked on div 2");}, false);#div1{&nbsp; background-color:red;&nbsp; padding: 24px;}#div2{&nbsp; background-color:green;}<div id="div1">&nbsp; div 1&nbsp; <div id="div2">&nbsp; &nbsp; div 2&nbsp; </div></div>