Web APIS 第四天
2022/7/9 23:20:45
本文主要是介绍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 APIS 第四天的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!