Web APIS 第四天

事件对象

　　事件对象是什么？ 也是个对象，

　　这个对象里有事件触发时的相关信息 事件对象在哪里？ 在事件绑定的回调函数的第一个参数就是事件对象

　　

　　事件对象常用属性

　　　　type 获取当前的事件类型

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

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

　　　　key 用户按下的键盘键的值

 

　　事件冒泡

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

　　　　　　　　简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

 

　　鼠标经过事件： mouseover 和 mouseout 会有冒泡效果

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

 

　　阻止事件流动

　　　　事件对象 . stopPropagation()

 

　　重点: 事件委托

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

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

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

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

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


综合案例