04_Javascript初步第三天

事件

1. 内联模型、脚本模型，DOM2级模型

       <!--内联模型-->
       <input type="button" value="bt1" onclick="alert('I am 内联模型1');">
       <input type="button" value="bt2" onclick="f();">
       //脚本模型
       <input type="button" value="bt3" id="bt3">
       <script type="text/javascript">
           function f(){
               alert('I am 内联模型2');
           }
           var bt3=document.getElementById('bt3');
           bt3.onclick=function(){
               alert('I am 脚本模型');
               alert(this.tagName);//输出：INPUT
           }
       </script>
   
       <input type="button" value="bt1" id="bt1">
       <script type="text/javascript">
           var bt1=document.getElementById('bt1');
           bt1.onclick=function(e){
               var e=e||window.event;//兼容性处理，IE支持window.event
               alert(e);//输出：Object mouseEvent
   //            alert(e.type);//输出：click
           }
           

2. 事件流：冒泡与捕获

   <div id="box1" style="background:lightgreen;width: 100px;height: 100px;" >
           <input type="button" value="btn1" id="btn1">
       </div>
       <script type="text/javascript">
           <!--事件冒泡,依次触发-->
           var btn1=document.getElementById('btn1');
           var box1=document.getElementById('box1');
           btn1.onclick=function(){alert('btn1 click!');}
           box1.onclick=function(){alert('box1 click!');}
           document.body.onclick=function(){alert('body click!');}
           document.documentElement.onclick=function(){alert('html click!');}
       </script>
   
       //取消冒泡
               var e=e || window.event;
               e.stopPropagation();
                   //取消冒泡，兼容性处理
               var e=e || window.event;
               if(typeof e.cancelBubble=='undefined'){
                   e.stopPropagation();
               }else{
                   e.cancelBubble=true;
               }
           }
   
       <!--绑定事件,增加第三个参数为true表示使用事件捕获-->
           var btn1=document.getElementById('btn1');
           var box1=document.getElementById('box1');
           btn1.addEventListener('click',function(){
               alert('btn1 click!');
           },true);
           box1.addEventListener('click',function(){
               alert('box1 click!');
           },true);
           document.body.addEventListener('click',function(){
               alert('body click!');
           },true);
           document.documentElement.addEventListener('click',function(){
               alert('html click!');
           },true);
           document.addEventListener('click',function(){
               alert('document click!');
           },true)
          
           

3. btn1.onclick=……等价于 btn.addEventListener(……)
4. 事件选择

       var btn1=document.getElementById('btn1');
       function handler(e){
           switch(e.type){
               case('click'):alert('clicked!');break;
               case('mouseover'):e.target.style.backgroundColor='red';break;
               case('mouseout'):e.target.style.backgroundColor='';break;
           }
       }
       btn1.onclick=handler;
       btn1.onmouseover=handler;
       btn1.onmouseout=handler;

5. 事件对象的三个阶段

       var btn1=document.getElementById('btn1');
       btn1.onclick=function(e){
           alert(e.eventPhase);
       }//输出2，目标阶段
   document.body.addEventListener('click',function(e){
           alert(e.eventPhase);
       },true);//输出1，捕获阶段
   document.body.onclick=function(e){
       alert(e.eventPhase);//输出3，冒泡阶段
   }

6. onload事件
      

   var btn1=document.getElementById('btn1');
           var img1=document.getElementById('img1');
           eventUtil.addHandler(img1,'load',function(e){
           alert(this.src);
           });

7. 表单验证：    插件：validform

           function check(){
           var un=document.getElementById('username').value;
           var pw=document.getElementById('pw').value;
           var em=document.getElementById('email').value;
           if(!/^[a-zA-Z0-9_]+$/.test(un)){
               alert('用户名:'+un+'不合法！');
               return false;
           }
           if(/^[\s\r\t\n]*$/.test(pw)){
               alert('密码不能为空！');
               return false;
           }
           if(!/^([\w\.\-]+)@([\w\-]+)\.([a-z]{2,4})$/.test(em)){
               alert('邮箱不合法！');
               return false;
           }
           return true;
           }