这是我参与「第四届青训营 」笔记创作活动的第30天

事件对象

1.事件对象是什么
也是个对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
2. 如何获取
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

     <button>点击</button>
     <script>
       let btn = document.querySelector('button')
       btn.addEventListener('mouseenter', function (e) {
           console.log(e)
       })
     </script>

事件流

事件流指的是事件完整执行过程中的流动路径。
说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段。
简单来说：捕获阶段是 从父到子；冒泡阶段是从子到父。

事件冒泡

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

    <div class="father">
       <div class="son"></div>
   </div>
   <script>
       // 事件监听注册(L2)
       let fa = document.querySelector('.father')
       let son = document.querySelector('.son')
       fa.addEventListener('click', function () {
           alert('我是爸爸')
       }, true)
       // 在旧版本的 DOM 的规定中， addEventListener()的第三个参数是一个布尔值表示是否在捕获阶段调用事件处理程序。
       // 若传入false代表冒泡阶段触发，默认就是false
       son.addEventListener('click', function () {
           alert('我是儿子')
       }, true)
       document.addEventListener('click', function () {
           alert('我是爷爷')
       }, true)

       // 传统on注册(L0)： btn.onclick = function() {}  若是用 L0 事件监听，则只有冒泡阶段，没有捕获
   </script>

事件委托

具体案例

利用事件流的特征解决一些开发需求的知识技巧， 给父元素添加事件，子元素可以触发

<ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
    </ul>
    <script>
        // 不要每个小li注册事件了  而是把事件委托给他的爸爸 
        // 事件委托是给父级添加事件 而不是孩子添加事件
        let ul = document.querySelector('ul')
        ul.addEventListener('click', function (e) {
            // alert('我点击了')
            // 得到当前的元素
            // console.log(e.target)
            e.target.style.color = 'red'
        })
    </script>