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

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

说明：

有一个很好的描述。简而言之（从quirksmode复制）：

事件捕获

  Event propagate to the upto root element is **BUBBLING**.

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.

使用事件捕获时

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

element1的事件处理程序首先激发，element2的事件处理程序最后激发

事件冒泡

  Event propagate to the upto root element is **BUBBLING**.

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.

使用事件冒泡时

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

element2的事件处理程序首先激发，element1的事件处理程序最后激发

---

使用什么？

---

这取决于你想做什么。没有比这更好的了。区别在于事件处理程序的执行顺序。大多数情况下，在冒泡阶段启动事件处理程序是可以的，但也可能需要更早地启动它们。

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

---

通过冒泡，事件首先由最内部的元素捕获和处理，然后传播到外部元素

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

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

滴下来，泡起来

回到过去，Netscape提倡事件捕获，而微软则提倡事件冒泡。两者都是W3C标准（2000）的一部分

IE<9使用，而IE9+和所有主流浏览器都支持这两种功能。另一方面，对于复杂的DOM，该方法是有效的

我们可以使用

addEventListener（type，listener，useCapture）

在冒泡（默认）或捕获模式下为注册事件处理程序。要使用捕获模型，请将第三个参数作为

true

传递

例子

p{
线高：0；
}
div{
显示：内联块；
填充物：5px；
背景：#fff；
边框：1px实心#aaa；
光标：指针；
}
div:悬停{
边框：1px实心#faa；
背景:#fdd；
}

1
2.
3.
4.
5.
净输出

如果有两个元素元素元素1和元素2。元素2位于元素1内部，我们附加了一个事件处理程序，其中包含两个元素，比如onClick。现在，当我们单击元素2时，将执行这两个元素的eventHandler。现在的问题是事件的执行顺序。如果与元素1连接的事件首先执行，则称为事件捕获；如果与元素2连接的事件首先执行，则称为事件冒泡。 根据W3C，事件将在捕获阶段开始，直到到达目标并返回到元素，然后开始冒泡

捕获和冒泡状态由addEventListener方法的useCapture参数确定

addEventListener（类型，侦听器，[，useCapture]）

默认情况下，useCapture为false。这意味着它处于起泡阶段

var div1=document.querySelector（“div1”）；
var div2=document.querySelector（“#div2”）；
div1.addEventListener（“单击”），函数（事件）{
警报（“您点击了div1”）；
}，对）；
div2.addEventListener（“单击”），函数（事件）{
警报（“您点击了div 2”）；
}，假）
#第1部分{
背景色：红色；
填充：24px；
}
#第二组{
背景颜色：绿色；
}

第一组
第2组
在解释这个主题时，我发现这一点非常清楚。最后的三点总结确实谈到了关键点。我在此引述：

事件首先被捕捉到最深处的目标，然后冒出气泡。在里面
IE还有一个属性可以告诉您事件是在目标位置还是来自其他地方，浏览器完全支持它

这是使用
eventPhase
属性的输出


var logElement=document.getElementById（'log'）；
函数日志（msg）{
如果（logElement.innerHTML==“无日志”
”）
logElement.innerHTML=“”；
logElement.innerHTML+=（''+msg+'
'）；
}
功能人性化事件（事件阶段）{
交换机（事件阶段）{
案例1://Event.CAPTURING\u阶段
return“事件正在通过目标的祖先对象传播”；
案例2://Event.AT_TARGET
返回“事件已到达事件目标”；
案例3://Event.BUBBLING\u阶段
return“事件正以相反的顺序通过目标的祖先传播回来”；
}
}
功能捕获（e）{
log（'capture:'+this.firstChild.nodeValue.trim（）+“；”+
人性化事件（如事件阶段）；
}
函数气泡（e）{
log（'bubble:'+this.firstChild.nodeValue.trim（）+“；”+
人性化事件（如事件阶段）；
}
var divs=document.getElementsByTagName（'div'）；
对于（变量i=0；i

p{
线高：0；
}
div{
显示：内联块；
填充物：5px；
背景：#fff；
边框：1px实心#aaa；
光标：指针；
}
div:悬停{
边框：1px实心#faa；
背景:#fdd；
}
1
2.
3.
4.
5.
清除日志
冒泡

  Event propagate to the upto root element is **BUBBLING**.

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.

捕获

  Event propagate to the upto root element is **BUBBLING**.

  Event propagate from body(root) element to eventTriggered Element is **CAPTURING**.

正如其他人所说，冒泡和捕获描述了一些嵌套元素接收给定事件的顺序

我想指出的是，对于最里面的元素，可能会出现一些奇怪的东西。事实上，在这种情况下，添加事件侦听器的顺序确实很重要

在下面的示例中，将首先执行
div2
的捕获，而不是冒泡；小家伙