JavaScript--事件

事件处理：
　　一、事件源：任何一个HTML元素(节点)
　　二、事件：各种操作(常见事件)
　　　　1.鼠标
　　　　　　click 单击
　　　　　　dblclick 双击
　　　　　　contextmenu 右击
　　　　　　mouseover 移入
　　　　　　mouseout 移出
　　　　　　mousedown 按下
　　　　　　mouseup 抬起
　　　　　　mousemove 移动

　　　　2.键盘
　　　　　　keypress 键盘事件
　　　　　　keydown 按下

　　　　3.文档
　　　　　　load 加载
　　　　　　unload 关闭(为了兼容可使用下面函数)
　　　　　　beforeunload关闭之前

　　　　4.表单
　　　　　　focus 焦点
　　　　　　blur 失去焦点
　　　　　　submit 提交事件
　　　　　　change 改变（如下拉框选择事件）

　　　　5.其他
　　　　　　scroll 滚动事件(常用延迟加载、瀑布流技术)
　　　　　　window.onscroll=function(){
　　　　　　　　document.documentElement.scrollTop;//获取滚动条的上距离
　　　　　　　　document.documentElement.scrollLeft;//滚动条的左距离
　　　　　　}

　　　　selectd 事件

　　三、事件处理程序
　　　　使用一个匿名或回调函数

加载事件
　　第一种：
　　　　格式： <tag on事件="事件处理程序" />
　　第二种：(常用)
　　　　<script>
　　　　　　对象.on事件=事件处理程序
　　　　</script>
　　第三种：(火狐不兼容)
　　　　<script for="事件源ID" event="on事件">事件处理程序</script>

事件对象
　　属性：
　　　　1. srcElement
　　　　2. keyCode 键盘值

　　事件 event window.event

　　　　1. srcElement 代表事件源对象
　　　　2. keyCode 事件发生时的键盘码 keypress , keydown keyup
　　　　3. clientX, clientY 坐标位置
　　　　4. screenX, screenY
　　　　5. returnValue
　　　　6. cancelBubble;

　　　　document.getElementById("one").offsetHeight; //获取one对应对象的高度
　　　　obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
　　　　obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
　　　　obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
　　　　obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

　　　　document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0；

实例1：表单验证

 1     <body>
 2         <h3 id="hid">JavaScript实例--表单事件</h3>
 3         <form action="3.html" name="myform" method="post" onsubmit="return doSubmit()">
 4             账号：<input type="text" name="uname" onblur="checkUname()"/><br/><br/>
 5             密码：<input type="password" name="upass" onblur="checkUpass()"/><br/><br/>
 6             邮箱：<input type="text" name="email" onblur="checkEmail()"/><br/><br/>
 7             <input type="submit" value="提交"/>
 8         </form>
 9         <script type="text/javascript">
10            /*
11            //获取所有input节点,选择性的添加获得焦点事件
12            var list = document.getElementsByTagName("input");
13            for(var i=0;i<list.length;i++){
14                 if(list[i].type=="text" || list[i].type=="password"){
15                     list[i].onfocus = function(){
16                         this.value="";
17                     }
18                 }
19            }
20            */
21            
22            //表单提交事件处理
23            function doSubmit(){
24                 return checkUname() && checkUpass() &&  checkEmail();
25            }
26            
27            //验证账号
28            function checkUname(){
29               var name = document.myform.uname.value;
30               if(name.match(/^w{8,16}$/)==null){
31                     alert("账号必须为8-16的有效字符！");
32                     return false;
33               }
34               return true;
35            }
36            
37            //验证密码
38            function checkUpass(){
39               var pass = document.myform.upass.value;
40               if(pass.match(/^.{6,18}$/)==null){
41                     alert("密码必须为6-18位！");
42                     return false;
43               }
44               return true;
45            }
46             
47            //验证邮箱
48            function checkEmail(){
49               var email = document.myform.email.value;
50               if(email.match(/^w+@w+(.w+){1,2}$/)==null){
51                     alert("请输入正确的Email地址！");
52                     return false;
53               }
54               return true;
55            }
56         </script>
57     </body>

实例2：商品展示

 1 <div id="did">
 2         <img id="mid" src="./images/11.jpg" width="384">
 3     </div>
 4     <div id="bigid"><img id="bigimg" src="./images/11.jpg"></div>
 5     <div id="list" >
 6         <img  src="./images/11.jpg">
 7         <img  src="./images/22.jpg">
 8         <img  src="./images/33.jpg">
 9         <img  src="./images/44.jpg">
10     </div>
11     <script type="text/javascript">
12     var list=document.getElementById("list").getElementsByTagName("img");
13 
14     for(var i=0;i<list.length;i++){
15         list[i].onmouseover=function(){
16             document.getElementById("mid").src=this.src;
17             document.getElementById("bigimg").src=this.src;
18         }
19     }
20     var mid = document.getElementById("mid");
21     var bigid = document.getElementById('bigid');
22 
23     mid.onmouseover=function(){
24         bigid.style.top=this.offsetTop+"px";
25         bigid.style.left=this.offsetLeft+this.offsetWidth+10+"px";
26         bigid.style.display="block";
27     }
28     mid.onmouseout=function(){
29         bigid.style.display='none';
30     }
31     mid.onmousemove=function(ent){
32         var myevent= ent || window.event;
33         var x=event.clientX - this.offsetLeft;
34         var y=event.clientY - this.offsetTop;
35 
36         bigid.scrollTop=y*5-200;
37         bigid.scrollLeft=x*5-200;
38     }
39     </script>

实例3：键盘事件(打飞机小游戏)

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8"/>
  5         <title>JavaScript--实例</title>
  6         <style>
  7             div{margin:0px;padding:0px;}
  8             #did{
  9                 500px;height:500px;
 10                 background:url('./images/bg2.png') no-repeat 0px -1036px;
 11                 position:relative;overflow:hidden}
 12             #mid{
 13                 top:200px;
 14                 left:100px;
 15                 position:absolute;}
 16             #pd0,#pd1,#pd2,#pd3,#pd4,#pd5,#e0,#e1,#e2,#boom{position:absolute;display:none;}
 17         </style>
 18     </head>
 19     <body>
 20         <h3>JavaScript实例--键盘事件</h3>
 21         <div id="did">
 22             <img id="pd0" src="./images/pd.png"/>
 23             <img id="pd1" src="./images/pd.png"/>
 24             <img id="pd2" src="./images/pd.png"/>
 25             <img id="pd3" src="./images/pd.png"/>
 26             <img id="pd4" src="./images/pd.png"/>
 27             <img id="pd5" src="./images/pd.png"/>
 28             
 29             <img id="e0" src="./images/e0.png"/>
 30             <img id="e1" src="./images/e1.png"/>
 31             <img id="e2" src="./images/e2.png"/>
 32             
 33             <img id="boom" src="./images/boom.gif"/>
 34             
 35             <img id="mid" src="./images/me.png"/>
 36         </div>
 37         <script type="text/javascript">
 38            //获取mid
 39            var mid = document.getElementById("mid");
 40            var did = document.getElementById("did");
 41            var boom = document.getElementById("boom");
 42            var bgh = -1036, bb=0;
 43            
 44            window.document.onkeydown = function(ent){
 45                 //获取兼容的事件
 46                 var event = ent || window.event;
 47                 //获取按键的值
 48                 //alert(event.keyCode);
 49                 switch(event.keyCode){
 50                     case 37: //左
 51                         mid.style.left = Math.max(0,mid.offsetLeft-5)+"px"; break;
 52                     case 38: //上
 53                         mid.style.top = Math.max(0,mid.offsetTop-5)+"px"; break;
 54                     case 39: //右
 55                         mid.style.left = Math.min(394,mid.offsetLeft+5)+"px"; break;
 56                     case 40: //下
 57                         mid.style.top = Math.min(424,mid.offsetTop+5)+"px";break;
 58                     case 32: //发射炮弹
 59                         fire(mid.offsetLeft+51,mid.offsetTop); break;
 60                 }
 61            }
 62            
 63            //发射炮弹
 64            function fire(x,y){
 65                 //获取遍历所有炮弹
 66                 for(var i=0;i<6;i++){
 67                     var pd = document.getElementById("pd"+i);
 68                     //判断是否可用
 69                     if(pd.style.display!="block"){
 70                         pd.style.top = y+"px";
 71                         pd.style.left= x+"px";
 72                         pd.style.display="block";
 73                         return;
 74                     }
 75                 }
 76            }
 77            
 78            //碰撞检测函数
 79            function checkPE(pd){
 80                 //获取炮弹坐标
 81                 var x = pd.offsetLeft+1;
 82                 var y = pd.offsetTop;
 83                 //遍历所有敌机
 84                 for(var i=0;i<3;i++){
 85                     var e = document.getElementById("e"+i);
 86                     //判断是否可用
 87                     if(e.style.display=="block"){
 88                         //获取敌机坐标位置
 89                         var x1 = e.offsetLeft+10;
 90                         var x2 = x1+95;
 91                         var y1 = e.offsetTop+40;
 92                         var y2 = y1+26;
 93                         //比较是否相撞
 94                         if(x>=x1 && x<=x2 && y>=y1 && y<=y2){
 95                             e.style.display="none";
 96                             pd.style.display="none";
 97                             boom.style.left = x-200+"px";
 98                             boom.style.top = y-200+"px";
 99                             boom.style.display="block";
100                             bb=5;
101                             return true;
102                         }
103                     }
104                 }
105                 return false;
106            }
107            
108            //游戏主线程
109            function running(){
110                 //负责移动可见炮弹
111                 for(var i=0;i<6;i++){
112                     var pd = document.getElementById("pd"+i);
113                     //判断是否可用
114                     if(pd.style.display=="block"){
115                         pd.style.top = pd.offsetTop-5+"px";
116                         //调用检测是否碰撞
117                         checkPE(pd);
118                         //判断是否已出屏幕，回收
119                         if(pd.offsetTop<-20){
120                             pd.style.display = "none";
121                         }
122                     }
123                 }
124                 //负责移动可见敌机
125                 for(var i=0;i<3;i++){
126                     var e = document.getElementById("e"+i);
127                     //判断是否可用
128                     if(e.style.display=="block"){
129                         e.style.top = e.offsetTop+4+"px";
130                         //判断是否已出屏幕，回收
131                         if(e.offsetTop>500){
132                             e.style.display = "none";
133                         }
134                     }
135                 }
136                 
137                 //负责移动地图背景
138                 bgh+=2;
139                 if(bgh>=-268){
140                     bgh=-1036;
141                 }
142                 did.style.backgroundPosition="0px "+bgh+"px";
143                 
144                 //负责处理爆炸场面绘制
145                 if(bb>0){
146                     bb--;
147                 }else{
148                     boom.style.display="none";
149                 }
150                 
151                 //负责随机出现敌机
152                 if(Math.round(Math.random()*100000)%30==2){
153                     for(var i=0;i<3;i++){
154                        var ee = document.getElementById("e"+i);
155                        //判断是否可用,并随机位置显示
156                        if(ee.style.display!="block"){
157                             ee.style.top="-82px";
158                             ee.style.left=(Math.round(Math.random()*100000)%450)+"px";
159                             ee.style.display="block";
160                             break;
161                        } 
162                     }
163                 }
164                 
165                 setTimeout("running()",33);
166            }
167            running();
168         </script>
169     </body>
170 </html>