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

当有很多盒子嵌套并且多层盒子都存在事件的时候,我们就必须要思考一个问题——这些事件的发生顺序。JS中用事件冒泡和事件捕获来处理事件流中事件发生顺序,在用addEventListener方法添加事件监听的时候,第三个参数用来控制是冒泡事件还是捕获事件(false为冒泡,true为捕获,默认值为false)。

事件冒泡

事件冒泡顾名思义,事件发生的顺序就像一个气泡从水底浮起那样,从底到顶,从内到外。JS中的事件冒泡和事件捕获_第1张图片

当只存在事件冒泡的时候,点击“李”的盒子,输出的答案如下图

JS中的事件冒泡和事件捕获_第2张图片

可以看到从内到外依次输出了“li sun qian zhao”.

事件捕获

事件捕获与事件冒泡刚好相反,它是从顶到底,从外到内的。

JS中的事件冒泡和事件捕获_第3张图片

 当只存在事件捕获的时候,点击“李”的盒子,相信答案你已经想到了,如下图:

JS中的事件冒泡和事件捕获_第4张图片

 可以看到从外到内依次输出了“zhao qian sun li”.

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

下面咱们来看一下如果两种处理方式都存在的时候,会产生怎么样的效果。

JS中的事件冒泡和事件捕获_第5张图片

可以先思考下自己的答案,正确答案如下图:

 

如果对这个答案有些小疑惑,解释一下这个输出结果的原因:

当同时存在冒泡事件和捕获事件的时候,捕获事件的优先级比冒泡事件的优先级高,并且上面咱们说过,捕获事件是从外到内的,所以先输出了“qian”,然后输出了“sun”;而后冒泡事件是从内到外的,所以先输出“li”,然后输出“zhao”。

你可能感兴趣的:(JS,javascript)