什么是事件冒泡和捕获？

Question

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

Answer 1

事件冒泡和捕获是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上的addEventListener

• 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>

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

  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>