论坛徽章:: 0

电梯直达

1楼 [收藏(0)] [报告]

发表于 2012-01-06 16:11 |只看该作者 |倒序浏览

javascript基础(十)JS事件(下)

今天复习下javascript的一些事件,上一节已经说了捕获和冒泡事件,这节主要来看看常见的事件,废话不多说,先截个图看看常见的事件

我写了两个htmL文件上源代码

Js代码

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">

复制代码

Html代码

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">