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

96
BennyLoo
2017.11.09 15:52* 字数 1440

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)。所以我们在日常开发中,如非特殊情况,在兼顾内存和兼容性的情况下,最好使用冒泡事件来标定事件处理器。

前端开发 - 学习
Web note ad 1