事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向...
下面来实现一个小的案例获取鼠标位置坐标
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0 ;
padding:0;
}
#area{
width:100px;
height:100px;
border:solid pink;
}
#show{
width:150px;
height:20px;
border:solid greenyellow;
margin-top:10px;
}
</style>
<script>
window.onload = function(){
var area = document.getElementById("area");/*获取两个div*/
var show = document.getElementById("show");
area.onmousemove = function(event){
var x = event.clientX;
var y = event.clientY;
show.innerHTML = "x = "+x + " , y = "+y;/*在show div中输出位置*/
};
};
</script>
</head>
<body>
<div id="area"></div>
<div id="show"></div>
</body>
</html>
效果.gif
onmousemove 该事件将会在鼠标在元素中移动时被触发
clientX可以获取鼠标指针的水平坐标
cilentY可以获取鼠标指针的垂直坐标
当鼠标在areaDiv中移动时，在show div中来显示鼠标的坐标
