JavaScript中的捕获事件和冒泡事件

DOM中，如果对象触发事件流，将有两种方式决定对象执行事件的顺序：捕获事件方式和冒泡事件方式。

下面这张图演示一个示例：

三层事件容器

一、先看看捕获事件

图中有三块点击区域，分别是单纯A区域 1和A、B混合区域2，以及A、B、C三者混合的区域3。
我们先给A、B、C三个元素分别加上事件处理器。为了方便接下来的结论总结，我再加一个window上的事件监听。

//B 
            divB.addEventListener('click',function(evt){
                console.log('B clicked')
            },true);
//A 
            divA.addEventListener('click',function(evt){
                console.log('A clicked')
            },true);    
//C         
            divC.addEventListener('click',function(evt){
                console.log('C clicked')
            },true);
//window
            window.addEventListener('click',function(evt){
                console.log('Window clicked')
            },true);

每个元素都给了一个事件处理器，或者叫事件监听器divC.addEventListener。 注意看看这个监听器的参数，第一个参事表示要监听的事件类型；第二个参数表示监听成功之后的处理函数；最后一个参数，是一个布尔值，表示是否捕获事件,为了验证捕获事件时的事件流是如何传递和执行的，我将这个参数设置为true,即开启捕获事件。具体我通过下面的演示来说明。

首先我们点击区域1：

捕获事件 - 点击区域1

执行了window和元素A的事件监听器。window事件监听器也执行了！可是我们并没有直接点击在window上啊？ 暂时元素的事件流会波及到父级元素。
继续看点击其他的区域的情况。

继续点击区域2：

捕获事件 - 点击区域2

一共执行了三次，一次window，一次A，还有一次B。并且顺序是:window->A->B。在这里可以看到，虽然我没有直接点击在A之上，而是点击在A的子元素B之上，A的事件处理器也跟着触发了，window的事件器也照样触发，这样基本上就可以确定：事件流会传递到所有的父级元素。并且从上面的执行的顺序来看，是从window->A->B的，也即是事件流从window开始，先到了A元素，然后才到B元素。请注意，这是在我们设置了捕获事件的情况下得到的结论。
这说明：

1. DOM中，最顶层元素产生的事件流，将波及到其所有的父级元素(直接或者间接)。

2. 在捕获事件方式中，事件流将从最上层的父级元素（即window）开始，逐步传递到当前点击的顶层元素。

为了验证上面两个结论，我们点击区域 3：

捕获事件 - 点击区域3

果然，跟预料的一样， 在捕获事件状态下，尽管没有直接点击到window、A、B中的任意一个，但是他们做为C的父级元素（直接或者间接），都受到了事件流的波及。并且，事件流是按照从父级元素开始，逐步往下传递的。

二、接着看看冒泡事件

在捕获事件中，我们是将事件监听器的最后一个参数设置成了true。相反的，现在我们设置成false则表示选择的是冒泡事件。
代码：

//A
            divA.addEventListener('click',function(evt){
                console.log('A clicked')
            },false);
//window
            window.addEventListener('click',function(evt){
                console.log('Window clicked')
            },false);
//B
            divB.addEventListener('click',function(evt){
                console.log('B clicked')
            },false);
            
//C
            divC.addEventListener('click',function(evt){
                console.log('C clicked')
            },false);

这次我们直接一点，从区域1开始，逐个点击。分别看看控制台打印的结果：

冒泡事件 - 点击区域1 冒泡事件 - 点击区域1
冒泡事件 - 点击区域1

可以看出，冒泡事件中，事件流依然会波及到元素本身以及它的所有父级元素。但是和捕获事件不同的是，冒泡事件方式下，事件流传递顺序恰恰相反：事件从元素本身开始，逐步向父级传递，直到window。

冒泡事件中，事件流从元素本身开始，逐步向父级传递，直到window。

三、同时存在捕获事件和冒泡事件

如果捕获事件和冒泡事件同时存在，那么事件流会如何走？答案是：先按捕获事件的方式，再按冒泡事件的方式。不妨使用代码验证一下：

//A
            divA.addEventListener('click',function(evt){
                console.log('A clicked')
            },true);
            divA.addEventListener('click',function(evt){
                console.log('A clicked')
            },false);
//window
            window.addEventListener('click',function(evt){
                console.log('Window clicked')
            },true);
            window.addEventListener('click',function(evt){
                console.log('Window clicked')
            },false);
//B
            divB.addEventListener('click',function(evt){
                console.log('B clicked')
            },true);
            divB.addEventListener('click',function(evt){
                console.log('B clicked')
            },false);
//C         
            divC.addEventListener('click',function(evt){
                console.log('C clicked')
            },true);
            divC.addEventListener('click',function(evt){
                console.log('C clicked')
            },false);

点击区域3:

捕获事件和冒泡事件共存-点击区域3

总结：window->A->B->C->C->B->A->window.即是：

同时存在捕获事件和冒泡事件时：事件流的传递先按捕获事件的规则传递一次，然后再按冒泡事件的规则传递一次。

可以整理成这个图：

DOM事件流

这时候有个疑问，既然DOM的事件流是按捕获事件->冒泡事件这样的顺序执行，那为什么在开启捕获事件的时候，父级元素的监听函数没有执行两次呢？原因：

DOM中，一个事件容器(可接受事件的元素)，会在接受事件流的时候触发响应的事件处理器，并且针对一个事件流，事件处理器只会触发一次。

四、应该如何选择使用捕获事件和冒泡事件

DOM中的事件流兼并捕获事件和冒泡事件，是因为要兼容对于市场上各种各样的浏览器。因为有的浏览器支持两种事件（chrome，ff等），有的只支持冒泡事件（ie6）。所以我们在日常开发中，如非特殊情况，在兼顾内存和兼容性的情况下，最好使用冒泡事件来标定事件处理器。