标签:console log JavaScript 参数 事件 左上角 event 坐标
当我们使用属性绑定事件时如果需要事件参数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>
标签:console,log,JavaScript,参数,事件,左上角,event,坐标 来源: https://blog.csdn.net/weixin_50053454/article/details/123117108
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。