var areaDiv = document.getElementById('areaDiv');
var showMsg = document.getElementById('showMsg');
/**
* 当事件的响应函数触发时，浏览器每次都会将一个事件对象作为实参传给响应函数
* 在事件对象中封装了当前事件一切信息
*
*/
areaDiv.onmousemove = function(e){
//在ie8这个是window对象
// var x = window.e.clientX;
// var y = window.e.clientY;
// if(!e){
// var x = window.e.clientX;
// var y = window.e.clientY;
// }
e = e || window.e;
var x = e.clientX;
var y = e.clientY;
//在showMsg中显示坐标
showMsg.innerHTML = 'x=' + x + ',y=' + y;
}
var box1 = document.getElementById('box1');
//绑定box1范围太小了，所以绑定document
document.onmousemove = function(e){
//获取滚动的距离
var st = document.documentElement.scrollTop || document.body.scrollTop;
var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
e = e || window.e;
//clientX,clientY当前可见鼠标坐标，相对于窗口
var x = e.clientX;
var y = e.clientY;
//pageX、pageY相对于页面,不兼容ie8
// var x = e.pageX;
// var y = e.pageY;
//设置div的偏移量
box1.style.left = x + sl + 'px';
box1.style.top = y + st + 'px';
}
/**
* 事件的冒泡
* -事件的向上传导，当后代元素的事件被触发时，其祖先元素的相同事件也会被触发
* -在开发中大部分开发都是有用的，如果不希望事件冒泡可以通过事件对象来取消冒泡
* cancelBubble = true;
*/
/**
* 事件的委派
* -将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件
* -事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*/
/**
* 事件的绑定
* 使用对象.事件 = 函数的形式绑定一个响应函数
* 不能绑定多个
*
* addEveentListener()
* -通过这个方法也可以为元素绑定响应函数
* 参数：
* --1.事件的字符串，不要on
* --2.回调函数，当事件触发时该函数会被调用
* --3.是否在捕获阶段触发事件，需要一个布尔值，一般传false
*
* 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
* 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
* 这个方法不支持ie8及以下的浏览器
*/
<body style="height:800px">
<div id="areaDiv"></div>
<div id="showMsg"></div>
<div id="box1"></div>
</body>
div{
width: 200px;
border: 1px solid black;
}
#areaDiv{
height: 40px;
margin-bottom: 10px;
}
#showMsg{
height: 20px;
}
#box1{
background-color: red;
width: 100px;
height: 100px;
margin-top: 10px;
position: absolute;
}