javascript 冒泡和捕获

JavaScript中的冒泡和捕获都是事件传播机制。

事件传递机制是指在DOM树结构中，一个事件在触发后如何向上传递或向下传递。在HTML中，每个元素的事件将由子元素依次向上传递到父元素。而在JavaScript中，则可以使用“冒泡”和“捕获”来分别控制事件的传递方向。

举个例子，在下面的HTML代码中：

<html>
<body>
<div id="div1"> 
<div id="div2">
<button id="btn">Click me</button>
</div>
</div>
</body>
</html>

如果我们需要在点击button按钮后输出“Button clicked!”语句，可以使用以下JavaScript代码：

document.getElementById("btn").onclick = function() {
console.log("Button clicked!");
};

但是如果我们在div2中也定义了一个相同的点击事件，那么该事件会在button事件之前触发吗？这就需要用到事件的传递方向了。

首先，我们先来看一下冒泡事件传递机制。它的传递方向是从子元素依次向上传递到父元素。在以上的HTML代码中，事件首先在button元素上触发，然后再依次向上传递到div2和div1，直到传递到document对象。因此，如果我们在div2中也定义了一个点击事件，它的触发时间将排在button事件之后。

以下是实现冒泡事件传递的JavaScript代码：

document.getElementById("btn").onclick = function() {
console.log("Button clicked!");
};
document.getElementById("div2").onclick = function() {
console.log("div2 clicked!");
};
document.getElementById("div1").onclick = function() {
console.log("div1 clicked!");
};
document.onclick = function() {
console.log("document clicked!");
};

当我们点击button按钮时，输出的结果将是：

Button clicked!
div2 clicked!
div1 clicked!
document clicked!

现在我们再来看看捕获事件传递机制。它的传递方向是从父元素依次向下传递到子元素。与冒泡事件传递机制相比，它的触发顺序是相反的。

以下是实现捕获事件传递的JavaScript代码：

document.getElementById("btn").onclick = function() {
console.log("Button clicked!");
};
document.getElementById("div2").addEventListener("click", function() {
console.log("div2 clicked!");
}, true);
document.getElementById("div1").addEventListener("click", function() {
console.log("div1 clicked!");
}, true);
document.addEventListener("click", function() {
console.log("document clicked!");
}, true);

此时，当我们点击button按钮时，输出的结果将是：

document clicked!
div1 clicked!
div2 clicked!
Button clicked!

在以上代码中，我们通过添加第三个参数（true）来启用了捕获事件传递机制。结果表明，触发顺序恰好相反，先从document对象开始逐级向下找到子元素进行事件处理，最后是button元素。

在实际应用中，根据具体情况选择不同的事件传递方向可以提高事件处理效率，缩短事件处理时间。此外，了解JavaScript中的事件传递机制还有利于我们更好地理解DOM树结构、熟悉各种事件类型，掌握JavaScript事件处理机制。