今天复习下javascript的一些事件,上一节已经说了捕获和冒泡事件,这节主要来看看常见的事件,废话不多说,先截个图看看常见的事件
我写了两个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" οnchange="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 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" οnfοcus="cardOnFocus(this)" οnblur="cardOnBlur(this)" /></h2>
<br />
密码:<input type="password" id="inputPass" value=""/>
</form>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JavaScript中的事件(下) </TITLE>
<META NAME="Content-Type" CONTENT="text/html;charset=utf-8">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
function pageOnLoad(){
var xDiv=document.getElementById("positionX");
var yDiv=document.getElementById("positionY");
function documentMouseMove(ev){
ev=ev||window.event;
if(navigator.userAgent.indexOf("Firefox")!=-1){
if(ev.pageX||ev.pageY){
xDiv.innerHTML="<font color='red'>"+ev.pageX+"</font>";
yDiv.innerHTML="<font color='red'>"+ev.pageY+"</font>";
}
}else{
var x=ev.clientX+document.body.scrollLeft-document.body.clientLeft;
var y=ev.clientY+document.body.scrollTop-document.body.clientTop;
xDiv.innerHTML="<font color='red'>"+x+"</font>";
yDiv.innerHTML="<font color='red'>"+y+"</font>";
}
}
document.οnmοusemοve=documentMouseMove;
}
//-->
</SCRIPT>
</HEAD>
<BODY οnlοad="pageOnLoad()">
X:<div id="positionX"></div>
Y:<div id="positionY"></div>
</BODY>
</HTML>