JavaScript事件类型学习

简介: 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>  

 

 

目录
相关文章
|
2月前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
76 0
|
4天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
23 3
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
76 5
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
54 2
|
2月前
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
61 5
|
2月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
67 4
|
2月前
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
40 2
|
2月前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
63 1
|
2月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。

热门文章

最新文章