JavaScript DOM事件对象的两个小练习 | 学习内容分享
Event 对象
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
本文用于记录个人学习过程中的两个小练习，其中包括事件对象的一些用法和问题的解决以及兼容性问题
- 获取鼠标指针坐标
- div跟随鼠标移动
练习
1 获取鼠标指针坐标
两个div，当鼠标在上面的div#areaDiv移动时，在下面的div#showMsg中显示鼠标指针坐标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#areaDiv{
width: 500px;
height: 200px;
border: 1px solid black;
}
#showMsg{
width: 500px;
height: 50px;
margin-top: 20px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
*/
//获取div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
/*
* 事件对象
* - 当事件的响应函数被触发时，浏览器会将一个事件对象作为实参传递进响应函数，
* 在事件对象中封装了当前事件相关的一切信息，比如：鼠标指针的坐标，键盘哪个按键被按下
*/
areaDiv.onmousemove = function(event){
/*
* 在IE8中，响应函数被触发时，浏览器不会传递事件对象
* 而是将事件对象作为window对象的属性保存的 window.event
* 但此方法不兼容火狐
*/
/*解决兼容问题，使用if判断
if(!event){
event = window.event;
}*/
//此方法更简单方便
event = event || window.event;
/* 获取坐标值
* clientX 可以获取鼠标指针的水平坐标
* clientY 可以获取鼠标指针的垂直坐标
*/
var x = event.clientX;
var y = event.clientY;
//显示坐标值
showMsg.innerHTML = 'x='+x+' , y='+y;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
2 div跟随鼠标移动
当鼠标在页面中移动时，使div跟随其移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟随鼠标移动</title>
<style type="text/css">
body{ width:2000px; height: 1000px;} /*使页面出现滚动条*/
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
//使div可以跟随鼠标移动，响应函数加给document
document.onmousemove = function(event){
event = event || window.event;
//获取滚动条滚动距离
var st = document.documentElement.scrollTop;
var sl = document.documentElement.scrollLeft;
//获取鼠标指针坐标
/* clientX、clientY
* 用于获取当前可见窗口的鼠标坐标
* 而div的偏移量是相对整个页面的
*
* pageX、pageY可以获取鼠标相对当前页面的坐标
* 但是不兼容IE8及以下
*
* 因此我们选择获取滚动条滚动距离，将其加到div的偏移量上
*/
var left = event.clientX;
var top = event.clientY;
//设置div偏移量
box1.style.left = left +sl+'px';
box1.style.top = top +st+'px';
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
部分内容来源于网上教程，侵删。
