JavaScript事件类型学习

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.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
5.<title>javascript事件</title>   
6.<script language="JavaScript" type="text/javascript">   
7.     
8.   function textChange(obj){   
9.     //alert(obj);   
10.        
11.    var div=document.getElementById("inputDiv");   
12.   var value=obj.value;   
13.   div.innerHTML=value;   
14.  }   
15.     
16.  function textChange2(obj){   
17.   var div=document.getElementById("inputDiv2");   
18.   var value=obj.value;   

19.   div.innerHTML=value;   
20.      
21.  }   
22.</script>   
23.  
24.</head>   
25.  
26.  
27.<body>   
28. onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div>   
29. onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div>   
30.    
31.</body>   
32.</html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript事件</title>
<script language="JavaScript" type="text/javascript">
  
   function textChange(obj){
     //alert(obj);
         
    var div=document.getElementById("inputDiv");
   var value=obj.value;
   div.innerHTML=value;
  }
  
  function textChange2(obj){
   var div=document.getElementById("inputDiv2");
   var value=obj.value;
   div.innerHTML=value;
   
  }
</sc
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.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
5.<title>javascript事件</title>   
6.<script language="JavaScript" type="text/javascript">   
7.     
8.   function textChange(obj){   
9.     //alert(obj);   
10.        
11.    var div=document.getElementById("inputDiv");   
12.   var value=obj.value;   
13.   div.innerHTML=value;   
14.  }   
15.     
16.  function textChange2(obj){   
17.   var div=document.getElementById("inputDiv2");   
18.   var value=obj.value;   
19.   div.innerHTML=value;   
20.      
21.  }   
22.</script>   
23.  
24.</head>   
25.  
26.  
27.<body>   
28. onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div>   
29. onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div>   
30.    
31.</body>   
32.</html>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript事件</title>
<script language="JavaScript" type="text/javascript">
  
   function textChange(obj){
     //alert(obj);
         
    var div=document.getElementById("inputDiv");
   var value=obj.value;
   div.innerHTML=value;
  }
  
  function textChange2(obj){
   var div=document.getElementById("inputDiv2");
   var value=obj.value;
   div.innerHTML=value;
   
  }
</script>

</head>


<body>
 onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div>
 onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div>
 
</body>
</html>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
代码2:
1.<html xmlns="http://www.w3.org/1999/xhtml">  
2.<head>  
3.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
4.<title>javascript事件2</title>  
5.<script language="JavaScript" type="text/javascript">  
6. function cardOnFocus(obj){   
7.    var value=obj.value;   
8.    if(value=="请输入格式:10XXXXXX"){   
9.      obj.value="";   
10.    }   
11. }   
12.    
13. function cardOnBlur(obj){   
14.    var value=obj.value;   
15.    var pattern=/^10\d{6}$/;   
16.    var result=pattern.test(value);   
17.       
18.    if(!result){   
19.       alert("您输入的格式错误,重新输入!");   
20.       obj.focus();   
21.      }else{   
22.        alert("格式输入正确!");   
23.    }   
24. }    
25.</script>  
26.  
27.</head>  
28.  
29.<body>  
30. <form>  
31.    <h2>卡号:<input type="text" id="inputCard"  value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2>  
32.    <br />  
33.    密码:<input type="password" id="inputPass" value=""/>  
34. </form>  
35.</body>  
36.</html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript事件2</title>
<script language="JavaScript" type="text/javascript">
 function cardOnFocus(obj){
    var value=obj.value;
        if(value=="请输入格式:10XXXXXX"){
          obj.value="";
        }
 }
 
 function cardOnBlur(obj){
    var value=obj.value;
        var pattern=/^10\d{6}$/;
        var result=pattern.test(value);
        
        if(!result){
           alert("您输入的格式错误,重新输入!");
           obj.focus();
          }else{
            alert("格式输入正确!");
        }
 } 
</script>

</head>

<body>
 <form>
    <h2>卡号:<input type="text" id="inputCard"  value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2>
        <br />
        密码:<input type="password" id="inputPass" value=""/>
 </form>
</body>
</html>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
代码3:
1.<HTML>  
2. <HEAD>  
3.  <TITLE> JavaScript中的事件(下) </TITLE>  
4.  <META NAME="Content-Type" CONTENT="text/html;charset=utf-8">  
5.  <META NAME="Author" CONTENT="">  
6.  <META NAME="Keywords" CONTENT="">  
7.  <META NAME="Description" CONTENT="">  
8.  <SCRIPT LANGUAGE="JavaScript">  
9.  <!--   
10.    function pageOnLoad(){   
11.        var xDiv=document.getElementById("positionX");   
12.        var yDiv=document.getElementById("positionY");   
13.           
14.        function documentMouseMove(ev){   
15.            evev=ev||window.event;   
16.            if(navigator.userAgent.indexOf("Firefox")!=-1){   
17.                if(ev.pageX||ev.pageY){   
18.                    xDiv.innerHTML="<font color='red'>"+ev.pageX+"</font>";   
19.                    yDiv.innerHTML="<font color='red'>"+ev.pageY+"</font>";   
20.                }   
21.            }else{   
22.                var x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;   
23.                var y=ev.clientY+document.body.scrollTop-document.body.clientTop;   
24.                xDiv.innerHTML="<font color='red'>"+x+"</font>";   
25.                yDiv.innerHTML="<font color='red'>"+y+"</font>";   
26.            }   
27.        }   
28.  
29.        document.onmousemove=documentMouseMove;   
30.    }   
31.  //-->  
32.  </SCRIPT>  
33. </HEAD>  
34.  
35. <BODY onload="pageOnLoad()">  
36.  X:<div id="positionX"></div>  
37.  Y:<div id="positionY"></div>  
38. </BODY>  
39.</HTML>  


ript>

</head>


<body>
 onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div>
 onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div>
 
</body>
</html>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
代码2:
1.<html xmlns="http://www.w3.org/1999/xhtml">  
2.<head>  
3.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
4.<title>javascript事件2</title>  
5.<script language="JavaScript" type="text/javascript">  
6. function cardOnFocus(obj){   
7.    var value=obj.value;   
8.    if(value=="请输入格式:10XXXXXX"){   
9.      obj.value="";   
10.    }   
11. }   
12.    
13. function cardOnBlur(obj){   
14.    var value=obj.value;   
15.    var pattern=/^10\d{6}$/;   
16.    var result=pattern.test(value);   
17.       
18.    if(!result){   
19.       alert("您输入的格式错误,重新输入!");   
20.       obj.focus();   
21.      }else{   
22.        alert("格式输入正确!");   
23.    }   
24. }    
25.</script>  
26.  
27.</head>  
28.  
29.<body>  
30. <form>  
31.    <h2>卡号:<input type="text" id="inputCard"  value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2>  
32.    <br />  
33.    密码:<input type="password" id="inputPass" value=""/>  
34. </form>  
35.</body>  
36.</html>  
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript事件2</title>
<script language="JavaScript" type="text/javascript">
 function cardOnFocus(obj){
    var value=obj.value;
        if(value=="请输入格式:10XXXXXX"){
          obj.value="";
        }
 }
 
 function cardOnBlur(obj){
    var value=obj.value;
        var pattern=/^10\d{6}$/;
        var result=pattern.test(value);
        
        if(!result){
           alert("您输入的格式错误,重新输入!");
           obj.focus();
          }else{
            alert("格式输入正确!");
        }
 } 
</script>

</head>

<body>
 <form>
    <h2>卡号:<input type="text" id="inputCard"  value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2>
        <br />
        密码:<input type="password" id="inputPass" value=""/>
 </form>
</body>
</html>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
代码3:
1.<HTML>  
2. <HEAD>  
3.  <TITLE> JavaScript中的事件(下) </TITLE>  
4.  <META NAME="Content-Type" CONTENT="text/html;charset=utf-8">  
5.  <META NAME="Author" CONTENT="">  
6.  <META NAME="Keywords" CONTENT="">  
7.  <META NAME="Description" CONTENT="">  
8.  <SCRIPT LANGUAGE="JavaScript">  
9.  <!--   
10.    function pageOnLoad(){   
11.        var xDiv=document.getElementById("positionX");   
12.        var yDiv=document.getElementById("positionY");   
13.           
14.        function documentMouseMove(ev){   
15.            evev=ev||window.event;   
16.            if(navigator.userAgent.indexOf("Firefox")!=-1){   
17.                if(ev.pageX||ev.pageY){   
18.                    xDiv.innerHTML="<font color='red'>"+ev.pageX+"</font>";   
19.                    yDiv.innerHTML="<font color='red'>"+ev.pageY+"</font>";   
20.                }   
21.            }else{   
22.                var x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;   
23.                var y=ev.clientY+document.body.scrollTop-document.body.clientTop;   
24.                xDiv.innerHTML="<font color='red'>"+x+"</font>";   
25.                yDiv.innerHTML="<font color='red'>"+y+"</font>";   
26.            }   
27.        }   
28.  
29.        document.onmousemove=documentMouseMove;   
30.    }   
31.  //-->  
32.  </SCRIPT>  
33. </HEAD>  
34.  
35. <BODY onload="pageOnLoad()">  
36.  X:<div id="positionX"></div>  
37.  Y:<div id="positionY"></div>  
38. </BODY>  
39.</HTML>  

 

 

posted @ 2012-10-24 22:19  y0umer  阅读(420)  评论(0编辑  收藏  举报