事件冒泡与事件捕获

目录

1. 事件冒泡与事件捕获

事件捕获

事件冒泡

示例1：

示例2：

示例三：

面试题：

1. 事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

1.事件的三个阶段: 先捕获，后目标，再冒泡,只能有一个阶段触发程序执行,比如捕获阶段触发了到了冒泡阶段就不再触发

事件经过所有元素都没有被处理,这个事件消失

事件传递的过程 只跟文档树的结构有关系 跟界面显示的层叠效果没有任何关系

 

事件捕获

网景提出另一种事件流名为事件捕获(event capturing)。与事件冒泡相反，事件会从最外层开始发生，直到最具体的元素。

上面的例子在事件捕获的概念下发生click事件的顺序应该是

document --> html --> body --> div --> p

事件冒泡

微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内层的元素开始发生，一直向上传播，直到document对象。

因此上面的例子在事件冒泡的概念下发生click事件的顺序应该是

p --> div --> body --> html --> document

 

示例1：

     <div onclick="console.log('大')" class="big">
         <div onclick="console.log('中')" class="mid">
             <div onclick="console.log('小')" class="smail"></div>
         </div>
     </div>

点击小盒子打印顺序为：小-->中-->大

点击中间盒子打印顺序为：中-->大

点击中间盒子打印顺序为：大

可以发现点击底层时会往上传播

示例2：

在 addEventListener() 中：

1、可以添加三个参数事件名、函数、布尔值

2、省略或将 第三参数 参数设置为 false，将注册冒泡阶段的事件。所以，事件监听器默认监听冒泡事件。

3、将 第三参数 参数设置为 true，将注册捕获阶段的事件。所以，事件监听器默认监听冒泡事件。

  <div class="big">大
         <div class="mid">中
             <div class="smail">小</div>
         </div>
     </div>
     <script>
         var smail = document.querySelector('.smail')
         var mid = document.querySelector('.mid')
         var big = document.querySelector('.big')
         function boxname() {
             console.log(this.innerText)
         }
         smail.addEventListener('click', boxname, false);
         mid.addEventListener('click', boxname, false);
         big.addEventListener('click', boxname, false);
     </script>

点击底层事件往上传播，点击顶层事件不会往上传播

 

示例三：

3、将 第三参数 参数设置为 true，将注册捕获阶段的事件。所以，事件监听器默认监听冒泡事件。

  <div class="big">大
         <div class="mid">中
             <div class="smail">小</div>
         </div>
     </div>
     <script>
         var smail = document.querySelector('.smail')
         var mid = document.querySelector('.mid')
         var big = document.querySelector('.big')
         function boxname() {
             //   console.log(this.innerText)
             console.log(this.className)
         }
         smail.addEventListener('click', boxname, true);
         mid.addEventListener('click', boxname, true);
         big.addEventListener('click', boxname, true);
     </script>

面试题：

 

回忆一下前面的事件流三个阶段，事件捕获是比事件冒泡优先的，因此会先触发事件捕获，但是这里有两个事件捕获，因此，我们再回忆一下前面讲到的过山车案例从高到低，也就是说事件捕获是从顶部到顶部的，那么这里的mother会比daughter更优先，捕获完了，就看剩余的两个冒泡，冒泡是反过来的，从底部到顶部，因此会先触发baby，然后才是grandma。