07-事件流事件流指的是事件完整执行过程中的流动路径说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕

事件流指的是事件完整执行过程中的流动路径

说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段

事件冒泡概念

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        let father = document.querySelector('.father')
        let son = document.querySelector('.son')
        father.addEventListener('click',function(){
            alert('我是爸爸')
        })
        son.addEventListener('click',function(){
            alert('我是儿子')
        })
        document.addEventListener('click',function(){
            alert('我是爷爷')
        })
        //点击son时，以上三个都会弹出，因为它会依次向上调用同名事件
    </script>

事件捕获概念
- 从DOM的根元素开始去执行对应的事件（从外到里）
- ```
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
```
- addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
- false代表冒泡、true代表捕获，默认就是false

阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

若想把事件就限制在当前元素内，就需要阻止事件流动

阻止事件流动需要拿到事件对象

语法：
- ```
事件对象.stopPropagation()
```
此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效

        son.addEventListener('click',function(e){
            alert('我是儿子')
            //阻止流动
            e.stopPropagation()
        })

阻止默认行为

比如：链接点击不跳转，表单域的跳转

语法：
```
e.preventDefault( )
```

    <a href="http://baidu.com">点击跳转</a>
    <script>
        let a = document.querySelector('a')
        a.addEventListener('click',function(e){
            e.preventDefault()
        })
    </script>

两种注册事件的区别

传统on注册（L0）

同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
直接使用null覆盖偶就可以实现事件的解绑
都是冒泡阶段执行的

    <button>点击</button>
    <script>
        let btn = document.querySelector('button')
        btn.onclick = function() {
            alert('第一次')
        }
        btn.onclick = function() {
            alert('第二次')
        }
        //解绑事件
        btn.onclick = null
    </script>

事件监听注册（L2）
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
- ```
            btn.addEventListener('click',add)
            function add(){
                alert('第二次')
            }
            //解绑事件
            btn.removeEventListener('click',add)
```

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

优点：给父级元素加事件（可以提高性能）

原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发

实现：事件对象.target 可以获得真正触发事件的元素

	<ul>
        <li>第一个</li>
        <li>第二个</li>
        <li>第三个</li>
        <li>第四个</li>
        <li>第五个</li>
    </ul>
    <script>
        let ul = document.querySelector('ul')
        ul.addEventListener('click',function(e){
            //得到当前元素  target可以知道你点击的哪一个
            //console.log(e.target) 
            e.target.style.color = 'red'
        })
    </script>

事件委托是委托给了谁？

父元素

如何找到真正触发的元素？

e.target 事件对象.target