<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#areaDiv{
width: 300px;
height: 100px;
border: 1px solid;
}
#showMsg{
width: 300px;
height: 50px;
border: 1px solid;
/* 文字居中 */
text-align: center;
/* 字体垂直居中 */
display: table-cell;
vertical-align: middle;
/* line-height只需与height保持一致,即可实现文字垂直居中效果。 */
/* line-height: 50px; */
}
</style>
<script>
window.onload = function(){
var areaDiv = document.getElementById('areaDiv');
var showMsg = document.getElementById('showMsg');
/*
onmousemove
-该事件将会在鼠标在元素中移动时被触发
事件对象:
-当事件响应函数被触发时,游览器每次都会将事件对象作为实参传递进响应函数
-在事件对象中封装了当前事件相关的一切信息,比如:鼠标坐标 键盘哪个按键被按下 鼠标滚轮滚动的方向
*/
// event形参可以随便取名字
areaDiv.onmousemove = function(event){
/*
在IE8中,响应函数被触发时,游览器不会传递事件对象
在IE8及以下的游览器中,是将事件对象作为window对象的属性保存的.
*/
// 如下两种代码都可以解决事件对象,让IE8游览器兼容问题
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>
<br>
<div id="showMsg"></div>
</body>
</html>