<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//在areaDiv移动时候，在showMsg显示鼠标的坐标
//获取两个div
var areaDiv=document.getElementById("areaDiv");
var showMsg=document.getElementById("showMsg");
//onmousemove
// -该事件会在鼠标移动时候触发
/*
* 事件对象
* -当响应函数触发时候，浏览器每次都会将一个事件对象作为一个实参传进响应函数
* clientX
* -可以获取鼠标移动时的水平坐标
* clientY
* -可以获取鼠标移动时的垂直坐标
* 语法：元素.clientX
*/
areaDiv.onmousemove=function(event){
//alert("我动了~~~");
/*
*ie8中，响应函数在被触发时，浏览器不会传递事件对象
*在ie8以下的浏览器中，是将事件作为window对象的属性保存的
*
*在showMsg显示坐标
if(!event){
event=window.event;
}
*/
event=event||window.event;
showMsg.innerHTML="(X="+event.clientX+","+"Y="+event.clientY+")";
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>