AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript事件类型学习

2012-10-24 693
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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
目录
相关文章
游客vx6uejvd6s6ck
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改， 个人信用报告pdf修改，js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现，包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
游客vx6uejvd6s6ck
693 0
游客vx6uejvd6s6ck
|
5月前
|
前端开发
个人征信PDF无痕修改软件，个人征信模板可编辑，个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统，旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告，涵盖还款记录
游客vx6uejvd6s6ck
1115 0
蓝易云
|
7月前
|
JavaScript 前端开发 Java
【Java进阶】详解JavaScript事件
总的来说，JavaScript事件是JavaScript交互设计的核心，理解和掌握JavaScript事件对于编写高效、响应式的网页应用至关重要。
蓝易云
149 15
大树营养快线
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误？
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理，可以提高JavaScript程序的可靠性和稳定性，减少错误对程序运行的影响。
大树营养快线
256 0
dasein58
|
6月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库，利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。同时，Three.js还具有很好的跨平台和跨浏览器兼容性，让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
dasein58
233 0
大树营养快线
|
JavaScript 前端开发 Java
除了 JavaScript，还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同，但都提供了类似的集合操作功能，方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
大树营养快线
380 113
G0518
|
JavaScript 前端开发 安全
深入理解TypeScript：增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript：增强JavaScript的类型安全性
G0518
303 0
李游Leo
|
10月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式，包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析，如模拟点击事件、派发自定义数据加载事件和实现提示框系统，帮助开发者掌握这些方法在实际开发中的应用，提升灵活性与兼容性。
李游Leo
384 3
龙大吉
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
440 5