其他分享
首页 > 其他分享> > Web APIS 第四天

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>


综合案例

 

标签:Web,触发,target,APIS,对象,元素,冒泡,第四天,事件
来源: https://www.cnblogs.com/LZYBOK/p/16461671.html