现在的位置: 首页 > 综合 > 正文

JavaScript事件类型学习

2013年05月20日 ⁄ 综合 ⁄ 共 6064字 ⁄ 字号 评论关闭

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.

抱歉!评论已关闭.