JavaScript中的捕获/防止捕获和冒泡/防止冒泡

事件流描述从页面接收事件的顺序。提出事件流概念的是IE和网景，但前者提出了常用的事件冒泡流，后者提出了事件捕获流。

第一部分：事件冒泡

也就是说，事件由最具体的元素接收，然后一步步传播到不太具体的节点(文档)。

这里有一个简单的例子：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title bubble/title style button { background : red；颜色：白色；} #第三{ width: 50px高度： 50px；border:thin纯红；} #第二个{ width: 100px高度： 100像素；border:thin纯红；} #第一个{ width:200px高度： 200 px；border:thin纯红；}/style/head body div id=' first ' div id=' second ' div id=' third ' button id=' button '事件冒泡/button/div/div script document . getelementbyid(' button ')。addEventListener('click ')，function(){ alert(' button ')；}，false)；document.getElementById('third ')。addEventListener('click ')，function(){ alert(' third ')；}，false)；document . getelementbyid(' second ')。addEventListener('click ')，function(){ alert(' second ')；}，false)；document.getElementById('first ')。addEventListener('click ')，function(){ alert(' first ')；}，false)；/script/body/html此时我们只点击按钮元素，效果如下：

可以看到，虽然我们只点击了按钮元素，但是按钮外的第三个、第二个、第一个上的事件是由内向外触发的，触发的顺序是从DOM树的下层到DOM树的顶部，所以叫做冒泡。

(注意：虽然我在这里使用了DOM2级别的事件处理程序，并且将每个事件设置为在冒泡阶段发生，但是即使使用了DOM0级别，结果也是一样的，冒泡是默认的)

但如果我们不想让事件冒泡呢？那么如何防止事件冒泡呢？

实际上，事件的对象有一个stopPropagation()方法来防止事件冒泡。我们只需要修改前面例子中button的事件处理程序，如下所示：

document . getelementbyid(' button ')。addEventListener('click ')，function(event){ alert(' button ')；event . stopperpagation()；}，false)；这样，点击按钮后，只会弹出一个弹出窗口，显示按钮。

注意：所有现代浏览器都支持事件冒泡，但是在实现上有一些不同。

第二部分：事件捕获

事件捕获和事件冒泡正好相反。事件捕获意味着不太特定的节点应该更早接收事件，而最特定的节点应该最后接收事件。例子如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title bubble/title style button { background : red；颜色：白色；} #第三{ width: 50px高度： 50px；border:thin纯红；} #第二个{ width: 100px高度： 100像素；border:thin纯红；} #第一个{ width:200px高度： 200 px；border:thin纯红；}/style/head body div id=' first ' div id=' second ' div id=' third ' button id=' button '事件冒泡/button/div/div script document . getelementbyid(' button ')。addEventListener('click ')，function(){ alert(' button ')；}，真)；document.getElementById('third ')。addEventListener('click ')，function(){ alert(' third ')；}，真)；document . getelementbyid(' second ')。addEventListener('click ')，function(){ alert(' second ')；}，真)；document.getElementById('first ')。addEventListener('click ')，function(){ alert(' first ')；}，真)；/script/body/html可以看到这个例子。我只是将前面例子中addEventListener()方法的第三个参数从false更改为true，也就是说，我使用了capture方法来获取按钮，因此结果如下：

我们可以看到最外面的事件先被触发，然后我们点击的按钮事件被触发，这就是事件捕获。

那么，我们如何防止事件被捕获呢？使用event.stopPropagation()方法？答案是否定的，这里我们应该知道stopPropagation()方法只能防止事件冒泡，而不能捕获事件。

但是，我们可以使用DOM3级别的新事件stopImmediatePropagation()方法来防止事件捕获，并且该方法还可以防止事件冒泡。应用如下：

document . getelementbyid(' second ')。addEventListener('click ')，function(){ alert(' second ')；event . stop immediatepropagation()；}，真)；这样，可以在第二个的id处阻止事件的捕获。

注意：虽然这是网景导航器提出的事件流，但现在所有浏览器都支持这种事件流模型。然而，由于旧浏览器不支持它，很少有人使用事件捕获。

第三部分：DOM事件流

DOM2事件规定的时间流程包括三个阶段：

事件捕获阶段在目标阶段事件冒泡阶段注意：在DOM事件流中，实际目标在捕获阶段不会接收到事件，下一个阶段在目标阶段，当事件被触发，最终进入事件冒泡阶段。我们认为处于目标阶段是事件冒泡阶段的一部分。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。