文章目录
一、基本概念
事件对象是什么
- 事件对象中封装了当前事件相关的一切信息，比如鼠标坐标，滚轮方向，键盘哪个按键被按下等等
事件对象如何用
在正常浏览器及IE8以上
- 当触发事件时，事件的响应函数都会将一个事件对象作为实参传递进函数，函数用形参接收
IE8及以下
- 事件对象是作为window对象属性保存的
二、解决浏览器兼容问题代码
event = event || window.event;
用下面代码解释
if(!event){
event=window.event;
}
如果没有传入事件对象event,则event就是window的属性
三、显示坐标例子
1.效果图
2.CSS代码及div代码
<style type="text/css">
#areaDiv{
height: 60px;
width: 200px;
border: 1px solid black;
}
#showMsg{
height:50px;
width: 120px;
border: 1px solid black;
}
</style>
<body>
<div id="areaDiv"></div>
<br/>
<div id="showMsg"></div>
</body>
3.JS代码
<script type="text/javascript">
window.onload=function(){
//获取两个div
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
//onmousemove事件鼠标在元素中移动触发
areaDiv.onmousemove = function(event){
//浏览器兼容问题
event = event || window.event;
//获取事件对象中xy坐标
var x =event.clientX;
var y =event.clientY;
//在showMsg中显示坐标
showMsg.innerHTML = "x=" + x + "，y="+y;
}
}
</script>
