JavaScript什么是事件冒泡和捕获？

Question

事件冒泡和捕获之间有什么区别？什么时候应该使用冒泡与捕获？

Answer 1

事件冒泡和捕获是HTML DOM
API中事件传播的两种方式，当事件发生在另一个元素内部的元素中，并且两个元素都已注册了该事件的句柄时。事件传播模式确定元素以什么顺序接收事件。

冒泡时，事件首先由最内层元素捕获和处理，然后传播到外层元素。

通过捕获，事件首先被最外面的元素捕获并传播到内部元素。

捕获也称为“滴答”，它有助于记住传播顺序：

down流，冒泡

过去，Netscape提倡事件捕获，而Microsoft提倡事件冒泡。两者都是W3C 文档对象模型事件标准（2000）的一部分。

IE <9 仅使用事件冒泡，而IE9 +和所有主流浏览器均支持。另一方面，对于复杂的DOM ，事件冒泡的性能可能会稍低。

我们可以addEventListener(type, listener, useCapture)在冒泡（默认）或捕获模式下使用来注册事件处理程序。要使用捕获模型，请将第三个参数传递为true。

例

<div>
    <ul>
        <li></li>
    </ul>
</div>

在上面的结构中，假定li元素中发生了单击事件。

在捕获模型中，事件将首先处理（将div首先div触发will 中的click事件处理程序），然后在中处理ul，然后在目标元素中最后处理li。

在冒泡模型中，将发生相反的情况：事件将首先由li，然后由ul，最后由div元素处理。

在下面的示例中，如果单击任何突出显示的元素，则可以看到事件传播流的捕获阶段首先发生，然后是冒泡阶段。

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>