DOM——事件捕获与事件冒泡

1. 事件冒泡与事件捕获的出现

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

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

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

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

事件捕获

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

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

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

事件冒泡

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

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

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

示例1：

在 addEventListener() 中：

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

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

  <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>