这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

前言：

大家好啊，又见面了，我是loncon，一个前端路上不断探索的小白，让我们开始今天的主题：来讲下面试高频知识点，事件冒泡，事件捕获以及事件流。

事件冒泡

一个元素的事件触发了，该事件会在该元素的所有的祖先元素中依次触发（从里到外），这个过程就称为事件冒泡

说白了就是：当我们触发了子元素的某个事件后，父元素对应的事件也会触发，事件要对应。冒泡一直到document。

<body>
    <div class="father">
      <div class="son">
        <div class="sun"></div>
      </div>
    </div>
    <script>
      var fa = document.querySelector('.father');
      var so = document.querySelector('.son');
      var su = document.querySelector('.sun');
      fa.onclick = function () {
        console.log('父元素被触发了');
      };
      so.onclick = function () {
        console.log('子元素被触发了');
      };
      su.onclick = function () {
        console.log('孙元素被触发了');
      };
    </script>
  </body>

冒泡的好处： //事件冒泡可以将多个事件委托给一个父元素去执行，实现事件委托。

//结合事件对象属性 target
 <body>
    <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
      <li>我是第6个li</li>
      <li>我是第7个li</li>
      <li>我是第8个li</li>
      <li>我是第9个li</li>
      <li>我是第10个li</li>
    </ul>
    <script>
      var ul = document.querySelector('ul');
      ul.onclick = function (e) {
        e.target.style.backgroundColor = 'red';
        //e.target 指的就是用户点击的那个元素，但是得代码结构清晰，层层嵌套建议不要用这个
      };
    </script>
  </body>

阻止冒泡

1.要先确定事件传播到谁那里停止，（一般是当前触发的那个元素居多，或者是祖先元素）
2.需要阻止什么事件传递给它就注册该事件  
3.在事件处理函数里面接受事件对象，并添加上 e.stopPropagation()

document.onclick = function(){
    box.style.display = 'none'
}
box.onclick = function(){
    e.stopPropagation();
}
//在box这里阻止冒泡，后面不会冒到document

事件捕获

一个元素的事件触发了，该事件会在该元素的祖先元素中依次向内部触发（从外到内）

addEventListener(type,func,useCapture)

第一个参数：事件的类型，click，mousemove
第二个参数：函数，监听者，每次点击，这个函数就执行
第三个参数：是否使用捕获，默认为false，表示冒泡    
捕获的话最后一个参数得是true
btn.addEventListener('click',function(){
    console.log('我是事件捕获');
},true)

事件流

阶段一：捕获阶段
阶段二：目标阶段触发事件的事件源
阶段三：冒泡阶段
可以使用addEventListener的第三个参数来决定元素的事件是在冒泡还是捕获阶段触发， true：捕获阶段触发

前端小白不迷路 - 今天来讲下面试高频知识点，事件冒泡，事件捕获以及事件流

前言：

事件冒泡

阻止冒泡

事件捕获

事件流