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;
           }