JS-事件对象

JS-事件对象

事件对象是什么

事件对象也是对象，这个对象里有事件触发时的相关信息
例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

如何获取

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为 event、ev、e
语法规范：

// e 就是 事件对象
元素.addEventListener('click',function(e){

})

获取事件对象

常用属性

type
获取当前的事件类型
clientX/clientY
获取光标相对于浏览器可见窗口左上角的位置
offsetX/offsetY
获取光标相对于当前DOM元素左上角的位置
key
用户按下的键盘键的值
现在不提倡使用keyCode

事件流

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

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

冒泡事件

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

<div class="father">
    <div class="son"></div>
</div>
    <script>
        let fa=document.querySelector('.father')
        let son=document.querySelector('.son')
        fa.addEventListener('click',function(){
            alert('我是爸爸')
            console.log(fa);
        })
        son.addEventListener('click',function(){
            alert('我是儿子')
            console.log(son);
        })
        document.addEventListener('click',function(){
            alert('我是爷爷')
            console.log(document);
        })
    </script>

点击白色(儿子)区域后

事件捕获

事件捕获指的是从DOM的根元素开始去执行对应的事件(从外到里)
格式：DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
说明：
(1).addEventListener是第三个参数传入true代表是捕获阶段触发(很少使用)
(2)若传入false代表冒泡阶段触发，默认就是false
(3)若是用LO事件监听，则只有冒泡阶段，没有捕获阶段

<div class="father">
    <div class="son"></div>
</div>
    <script>
        let fa=document.querySelector('.father')
        let son=document.querySelector('.son')
        fa.addEventListener('click',function(){
            alert('我是爸爸')
            console.log(fa);
        },true)
        son.addEventListener('click',function(){
            alert('我是儿子')
            console.log(son);
        },true)
        document.addEventListener('click',function(){
            alert('我是爷爷')
            console.log(document);
        },true)
    </script>

同样点击白色(儿子)部分后

阻止事件流动

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
若想把事件就限制在当前元素内，就需要阻止事件流动
阻止时间流动需要拿到事件对象
语法：事件对象.stopPropagation()
此方法可以阻断时间流动传播，不光在冒泡阶段有效，捕获阶段也有效

<div class="father">
    <div class="son"></div>
</div>
    <script>
        let fa=document.querySelector('.father')
        let son=document.querySelector('.son')
        fa.addEventListener('click',function(){
            alert('我是爸爸')
            console.log(fa);
        })
        son.addEventListener('click',function(e){
            alert('我是儿子')
            e.stopPropagation();
            console.log(son);
        })
        document.addEventListener('click',function(){
            alert('我是爷爷')
            console.log(document);
        })
    </script>

只点击白色区域

鼠标经过事件

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

事件委托

事件委托就是利用事件流的特征解决一些开发需求的知识技巧
优点：给父级元素加事件(可以提高性能)
原理：事件委托其实是利用事件冒泡的特点，给父级元素添加事件，子元素触发
实现：事件对象.target可以获得真正触发时间的元素

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>
    <script>
        let ul=document.querySelector('ul')
        ul.addEventListener('click',function(e){
            e.target.style.color='red'
            console.log(e)
        })
    </script>

通过点击任意一个li来触发事件委托