事件参数event总结(JavaScript)
2022/2/24 20:21:52
本文主要是介绍事件参数event总结(JavaScript),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
当我们使用属性绑定事件时如果需要事件参数e,需要传入event这个实参。
event | 事件信息对象,包含了事件目标和坐标信息 |
event.type | 事件类型 |
event.target | 事件触发目标,谁触发了事件(不确定是谁) |
event.currentTarget | 事件目标本身,谁绑定了事件(总是指向事件目标) |
this | this指向事件目标 == event.currentTarget |
关于参数e的坐标问题
event.screenX, event.screenY | 鼠标相对于电脑屏幕左上角的坐标 |
event.pageX, event.pageY | 鼠标相对于网页左上角的坐标 |
event.clientX, event.clientY | 鼠标相对于显示窗口左上角的坐标 |
event.layerX, event.layerY | 鼠标相对于非静态定位的父级元素左上角的坐标,类似于绝对定位 |
event.offsetX, event.offsetY | 鼠标相对于event.target出发事件的目标左上角的坐标 |
<div><button>点我</button></div> <!-- 使用属性绑定事件时, 如果需要事件参数e, 需要传入event这个实参 --> <script> // var data = prompt("提示") var div = document.querySelector("body div") div.onclick = function(event){ // 每一个事件被触发时,都会向事件函数中传入一个参数, 这个参数是事件信息对象, 里边包含了事件目标,和坐标等信息 console.log(event) // 获取事件类型 console.log(event.type) // 获取事件触发目标, 谁触发了事件, 可以是事件目标div的子元素 console.log(event.target) // 获取事件目标本身, 谁绑定了事件, 总是事件目标div console.log(event.currentTarget) // 在事件函数中this指向事件目标 == event.currentTarget console.log(this) // 关于坐标 // 1, 鼠标相对于电脑屏幕左上角的坐标 console.log(event.screenX, event.screenY) // 2, 鼠标相对于网页左上角的坐标 console.log(event.pageX, event.pageY) // 3, 鼠标相对于显示窗口左上角的坐标 console.log(event.clientX, event.clientY) // 4, 鼠标相对于非静态定位的父级元素左上角的坐标,类似于绝对定位 console.log(event.layerX, event.layerY) // 5, 鼠标相对于event.target出发事件的目标左上角的坐标 console.log(event.offsetX, event.offsetY) } </script>
这篇关于事件参数event总结(JavaScript)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-05小米13T Pro系统合集:性能与摄影的极致融合,值得你升级的系统ROM
- 2024-10-01基于Python+Vue开发的医院门诊预约挂号系统
- 2024-10-01基于Python+Vue开发的旅游景区管理系统
- 2024-10-01RestfulAPI入门指南:打造简单易懂的API接口
- 2024-10-01初学者指南:了解和使用Server Action
- 2024-10-01Server Component入门指南:搭建与配置详解
- 2024-10-01React 中使用 useRequest 实现数据请求
- 2024-10-01使用 golang 将ETH账户的资产平均分散到其他账户
- 2024-10-01JWT用户校验课程:从入门到实践
- 2024-10-01Server Component课程入门指南