DOM事件流

大家在学习js的时候有没有困惑，为什么会出现冒泡，冒泡的机制是什么

接下来我向大家介绍一下DOM事件流，大家就清楚了

那么什么是DOM事件流
**

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即 DOM 事件流。

**
事件流描述的是从页面中接收事件的顺序。
比如我们给一个div 注册了点击事件：
DOM 事件流分为3个阶段：
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段 //主要阶段

注意
1.JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick 和 attachEvent 只能得到冒泡阶段。
3.addEventListener(type, listener[, useCapture])第三个参数如果是 true，表示在事件捕获阶段调用事件处理程序；
如果是 false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。
4.实际开发中我们很少使用事件捕获，我们更关注事件冒泡。
5.有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
6.事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件。

有时候在子元素与父元素同时注册了事件，但是让子元素响应，父元素也会跟着响应

<div class="father">
 <div class="son"></div>
</div>

<style>
  .father {
        width: 400px;
        height: 400px;
        margin: 100px auto;
        background-color: darkkhaki;
        padding: 10px;
        box-sizing: border-box;
    }
    .son {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        background-color: darkmagenta;
    }
</style>

<script>
    var son = document.querySelector('.son');
    son.addEventListener('click', function() {
        alert('son');
    })
    var father = document.querySelector('.father');
    father.addEventListener('click', function() {
        alert('father');
    })
    son.addEventListener('click', function() {
        alert('son');
    })
    father.addEventListener('click', function() {
        alert('father');
    })
</script>

大家可以实验一下

那么便利之处就在于可以实现事件委托
事件委托就是

不给每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        ul.onmousemove = function(e) {
            e.target.style.backgroundColor = 'orange';
        }
    </script>