前言
onmouseXXX事件是用来监听鼠标相关的操作的，例如有onmousedown,onmousemove,onmouseout等，今天我们来看看onmousemove方法的使用，以及注意事项。
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body onmousemove="test()" style="margin: 0;">
<div id="app" style="background: red;">aa</div>
<script type="text/javascript">
var app = document.getElementById("app");
function test(){
var x = event.clientX;
var y = event.clientY;
app.innerText = "x: "+x + "y: " + y
}
</script>
</body>
</html>
效果图
我们要实现的效果是当鼠标在整个页面上移动时，在div标签内显示出当前鼠标位置在浏览器中的坐标，但是当你运行上面的代码时，你发现只有鼠标放到div所在的范围内时，才会显示坐标信息。要想在整个页面中能起到效果，需要采用下面的方式。
方式一： 只采用body标签作为跟标签
<body onmousemove="test()" style="margin: 0;">
<div id="app" style="background: red;">aa</div>
<script type="text/javascript">
var app = document.getElementById("app");
function test(){
var x = event.clientX;
var y = event.clientY;
app.innerText = "x: "+x + "y: " + y
}
</script>
</body>
方式二： 在代码中监听
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body style="margin: 0;">
<div id="app" style="background: red;">aa</div>
<script type="text/javascript">
var app = document.getElementById("app");
function test(){
var x = event.clientX;
var y = event.clientY;
app.innerText = "x: "+x + "y: " + y
}
//此处test没有括号
document.onmousemove = test;
</script>
</body>
</html>
原因解释：
为什么最开始的方式无法实现我们的效果呢？根据我个人的猜测，onmousemove属性需要放到跟标签上才有作用。最开始的方式中，虽然body标签的范围是整个页面，但是它不是跟标签，所以无法实现。
