API (DOM - 事件高级)

一、事件对象

        1. 获取事件对象

                事件对象：

                        也是个对象，这个对象里有事件触发时的相关信息；

                        例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。

                如何获取：

                        在事件绑定的回调函数的第一个参数就是事件对象；一般命名为event、ev、e 。

                        

        2. 事件对象常用属性

                部分常用属性：

                        type：获取当前的事件类型。

                        clientX/clientY：获取光标相对于浏览器可见窗口左上角的位置。

                        offsetX/offsetY：获取光标相对于当前DOM元素左上角的位置。

                        key：用户按下的键盘键的值；现在不提倡使用keyCode。

二、事件流

        事件流：是指时间流动过程中的的流动路径。

        简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父

        

        1. 事件冒泡 / 事件捕获

                事件冒泡：

                当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。事件冒泡是默认存在的。

              事件捕获：

                从DOM的根元素开始去执行对应的事件 (从外到里)。

                 说明：

                          addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）

                          若传入false代表冒泡阶段触发，默认就是false

                          若是用 L0 事件监听，则只有冒泡阶段，没有捕获

        2. 阻止事件流动

                默认有冒泡模式的存在，容易导致事件影响到父级元素，想把事件就限制在当前元素内，就需要阻止事件流动。

                

                 此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效。

                鼠标经过事件：

                       mouseover 和 mouseout 会有冒泡效果。

                       mouseenter 和 mouseleave 没有冒泡效果(推荐)。

                阻止默认行为： 如：阻止链接跳转，表单域的跳转

                

                关于两种注册事件的区别：

        let btn = document.querySelector('button')
        /* btn.onclick = function () {
            alert('第一次')
        } */
        //1.  L0(传统on注册事件) ：同一对象，会覆盖前面的注册事件
        /* btn.onclick = function () {
            alert('第二次')
        }

        // 解绑事件
        btn.onclick = null */


        // 2.L2 （事件监听注册） addEventListener
        btn.addEventListener('click', add)
        function add() {
            alert('第一次')
        }
        /* btn.addEventListener('click', function() {
            alert('第二次')
        }) */
        btn.removeEventListener('click', add)   //移除add的弹框

三、事件委托

    <ul>
        <li>我是第1个小li</li>
        <li>我是第2个小li</li>
        <li>我是第3个小li</li>
        <li>我是第4个小li</li>
        <li>我是第5个小li</li>
   </ul>

    //不用每个小li都注册事件了，而是把事件委托给父级
    let ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
        //alert('我点击了')
        // 得到当前的元素，添加事件对象
        //console.log(e.target)  | 事件对象.target 可以获得真正触发时间的元素
        e.target.style.color = 'pink'
    })