事件对象
当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,在事件对象中封装了当前事件相关的一切信息,比如,鼠标的坐标 、键盘哪个键被按下、鼠标滚轮滚动的方向。。。
鼠标移动事件(响应函数):
onmousemove:该事件将会在"鼠标在元素中移动时"被触发。
属性:
clientX:可以获取鼠标指针在可见窗口的水平坐标。
clientY:可以获取鼠标指针在可见窗口的垂直坐标。
pageX:可以获取鼠标指针相对于当前页面的水平坐标。
pageY:可以获取鼠标指针相对于当前页面的垂直坐标。
兼容性问题
1、在IE8及以上的浏览器中,是将事件对象作为window对象的属性保存的。
2、在IE8中,响应函数被触发时,浏览器不会传递事件对象,需要在对象前加window。但此方式在火狐浏览器不兼容。
3、在IE8中,不支持 pageX、pageY 这两个属性。
4、chrome认为浏览器的滚动条是body的,可以通过body.scrollTop来获取,火狐等浏览器认为浏览器的滚动条是html的。
关于"传递事件对象"浏览器兼容性解决办法:
方法1、if(!event){
event = window.event;
}
方法2、event = event || window.event;
关于"获取滚动条距离"浏览器兼容性解决办法:
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
var st = document.body.scrollTop || document.documentElement.scrollTop;
获取鼠标在可见窗口坐标的计算方式:
方式1:
var x = event.pageX;
var y = event.pageY;
方式2:
var x = event.clientX + sl;
var y = event.clientY + st;
案例1:
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件对象</title>
<style>
#mouseArea {
width: 200px;
height: 100px;
background-color: aquamarine;
}
#showMouseMove {
height: 50px;
width: 200px;
background-color: bisque;
}
</style>
<script>
window.onload = function () {
var mouseArea = document.getElementById("mouseArea");
var showMouseMove = document.getElementById("showMouseMove");
mouseArea.onmousemove = function (event) {
// 解决多平台浏览器的兼容性问题
event = event || window.event;
var x = event.clientX;
var y = event.clientY;
showMouseMove.innerHTML = "X = " + x + " Y = " + y;
}
}
</script>
</head>
<body>
<div id="mouseArea"></div>
<div id="showMouseMove"></div>
</body>
</html>
案例2:
html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>DIV跟随鼠标移动</title>
</head>
<style>
body{
width: 1800px;
height: 1000px;
}
#box1 {
width: 80px;
height: 60px;
background-color: aquamarine;
/* 开启绝对定位才能获取偏移量 */
position:absolute;
}
</style>
<script>
window.onload = function(){
var box1 = document.getElementById("box1");
document.onmousemove = function(event){
// 获取事件对象,同时解决各浏览器兼容性问题
event = event||window.event;
// 获取滚动条的距离,同时解决各浏览器兼容性问题
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
// 获取鼠标在可见窗口的坐标
var x = event.clientX;
var y = event.clientY;
// 把鼠标在当前页面的坐标位置赋值给div
box1.style.left = x + sl + "px";
box1.style.top = y + st + "px";
// 等价于:
// var x = event.pageX;
// var y = event.pageY;
// box1.style.left = x + "px";
// box1.style.top = y + "px";
}
}
</script>
<body>
<div id="box1"></div>
</body>
</html>