js基础_68、事件对象
事件对象
—-当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数中。
—-在事件对象中封装了当前事件相关的一切信息。比如：鼠标的坐标，键盘哪个按键被按下、鼠标滚轮滚动的方向。。。
事件对象.clientX可以获取鼠标指针的水平坐标。（获取鼠标在当前可见的窗口的坐标），
获取的偏移量是相对于当前浏览器可见窗口的大小来获取的。
事件对象.clientY可以获取鼠标指针的垂直坐标。（获取鼠标在当前可见的窗口的坐标）
事件对象.pageX可以获取鼠标相对于当前页面的坐标。获取的元素偏移量是相对于整个文档。
事件对象.pageX可以获取鼠标相对于当前页面的坐标。
onmousemove
该事件将会在鼠标在元素中移动时被触发。
练习。在一个div中显示出当前鼠标的坐标。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script>
window.onload=function(){
var box1=document.getElementById("areaDiv");
var box2=document.getElementById("showMsg");
box1.onmousemove=function(event){
//在IE8中及以下，响应函数被触发时，浏览器不会传递事件对象。
//是将事件对象作为window对象的属性保存的
//解决对象兼容性的问题
event=event||window.event;
var x=event.clientX;
var y=event.clientY;
box2.innerHTML="x坐标为： "+x+" "+" y坐标为："+y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构