备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

JavaScript事件类型学习

2012-10-24 638
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1.DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional. 

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>

 

 

文章标签：
JavaScript
前端开发
Web App开发
数据安全/隐私保护
关键词：
JavaScript学习
JavaScript类型
JavaScript事件
y0umer
目录
相关文章
泡芙-草莓
|
20天前
|
JavaScript
常见函数的4种类型（js的问题）
常见函数的4种类型（js的问题）
泡芙-草莓
11 0
hhzz
|
1月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题（springboot项目中）
解决js中Long类型数据在请求与响应过程精度丢失问题（springboot项目中）
hhzz
37 0
天玄TX
|
22天前
|
JavaScript 前端开发
JavaScript 中如何检测一个变量是一个 String 类型？
JavaScript 中如何检测一个变量是一个 String 类型？
天玄TX
21 2
泡芙-草莓
|
20天前
|
JavaScript
事件触发、事件捕获与事件冒泡（js的问题）
事件触发、事件捕获与事件冒泡（js的问题）
泡芙-草莓
10 0
find_starshine
|
8天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
find_starshine
13 0
67vpym2vvkfhs
|
19天前
|
JavaScript 前端开发
JavaScript数组的功能内置类型
数组是JavaScript的内置类型，JavaScript数组的功能特别强大。下面简单介绍一下JavaScript数组。
67vpym2vvkfhs
7 0
天玄TX
|
22天前
|
存储 JavaScript 前端开发
JavaScript 中松散类型的理解
JavaScript 中松散类型的理解
天玄TX
26 3
天玄TX
|
22天前
|
JavaScript 前端开发 流计算
JS：oninput和onchange事件的区别
JS：oninput和onchange事件的区别
天玄TX
19 1
龙大吉
|
1月前
|
JavaScript 前端开发
js开发：请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件，而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式，`false`或不设为冒泡，`true`为捕获。例如： ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
龙大吉
15 0
python兴趣圈
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
发现了一款宝藏学习项目，包含了Web全栈的知识体系，JS、Vue、React知识就靠它了！
python兴趣圈
33 2