事件对象

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <script type="text/javascript">
 8 window.onload=function()
 9 {
10  /*
11  当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
12  */
13  //获取两个div
14  var areaDiv=document.getElementById("areaDiv");
15  var showMsg=document.getElementById("showMsg");
16  /*
17  onmousemove
18  该事件将会在鼠标在元素中移动时被触发
19 
20  事件对象
21  当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
22  在事件对象中封装了当前事件相关的一切信息 比如：鼠标的坐标 键盘哪个键被按下 鼠标滚轮滚动的方向
23  */
24  areaDiv.onmousemove=function(event){
25  //在showMsg中显示鼠标的坐标
26  //alert(event);
27 /*
28  clientX可以获取鼠标指针的水平坐标
29  clientY可以获取鼠标指针的垂直坐标
30 */
31  /*
32  在IE8中，响应函数被处罚时，浏览器不会传递事件对象
33  在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
34  而火狐不将事件对象对我window对象的属性保存
35 
36  if(!event){
37  event=window.event;
38  }
39  */
40  //解决事件对象兼容性问题
41  event=event||window.event;//如果存在event对象就返回event对象
42  var x=event.clientX;//window.event火狐不支持
43  var y=event.clientY;
44  showMsg.innerHTML="x:"+x+" y:"+y;
45  };
46 };
47   </script>
48 <style type="text/css">
49 #areaDiv{
50 width:100px;
51 height:25px;
52 border:1px solid black;;
53 }
54 #showMsg{
55 width:100px;
56 height:20px;
57 border:1px solid black;
58 }
59 </style>
60 <body>
61 <div id="areaDiv"></div>
62 <br><br>
63 <div id="showMsg"></div>
64 </body>
65 </html>