事件对象,阻止冒泡,键盘事件

event事件兼容:

 1 //IE    event
 2     oDiv.style.left=event.clientX+'px';
 3     oDiv.style.top=event.clientY+'px';*
 4     
 5 //FF    事件处理的参数
 6     oDiv.style.left=ev.clientX+'px';
 7     oDiv.style.top=ev.clientY+'px';
 8 
 9     /*if(ev){
10         oDiv.style.left=ev.clientX+'px';
11         oDiv.style.top=ev.clientY+'px';
12     }
13     else{
14         oDiv.style.left=event.clientX+'px';
15         oDiv.style.top=event.clientY+'px';
16     }*/

示例:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <style>
 5 #div1 {width:100px; height:100px; background:red; position:absolute;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script type="text/javascript">
10 document.onmousemove=function (ev){
11     var oDiv=document.getElementById('div1');
12     
13     var oEvent=ev||event;
14     
15     oDiv.style.left=oEvent.clientX+'px';
16     oDiv.style.top=oEvent.clientY+'px';
17 
18 };
19 </script>
20 </head>
21 
22 <body>
23 <div id="div1">
24 </div>
25 </body>
26 </html>

同理,对于键盘事件(示例):

1 document.onkeydown=function (ev)
2 {
3     var oEvent=ev||event;
4     
5     alert(oEvent.keyCode);
6 };

阻止冒泡:

 1 <html>
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 4 <title>无标题文档</title>
 5 <script type="text/javascript">
 6 window.onload=function (){
 7     var oBtn=document.getElementById('btn1');
 8     
 9     oBtn.onclick=function (ev){
10         var oEvent=ev||event;
11         alert('btn1');
12         
13         oEvent.cancelBubble=true;  //阻止点击button按钮时弹出hello(取消冒泡)
14     };
15 
16     document.onclick=function (){
17         alert('hello');
18     };
19 };
20 </script>
21 </head>
22 <body>
23 <input id="btn1" type="button" value="aaa" />
24 </body>
25 </html>

 

posted @ 2013-08-07 10:15  远方的远方  阅读(422)  评论(0编辑  收藏  举报