zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    任何时候都适用的20个C++技巧
    C++ 解析Json——jsoncpp（转）
    C++标准库和标准模板库（转）
    string标准C++中的的用法总结（转）
    JOIN US | 京东智联云诚聘技术精英
    在线公开课 | 云原生下的DevOps与持续交付
    AI端侧落地，京东AI技术如何部署边缘？
    CVPR 2020 | 京东AI研究院对视觉与语言的思考：从自洽、交互到共生
    IOT、AI、云计算等融合技术推进制造业产业转型
    边缘计算2.0时代，“云边缘”与“边缘云”你分清了吗？
  • 原文地址：https://www.cnblogs.com/y0umer/p/2737875.html
Copyright © 2011-2022 走看看