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

qinweiping

浏览: 131331 次
性别:
来自: 嘉兴

最近访客更多访客>>

lord_is_layuping

Phenix_Yu

sdljgbfndksg5616

wlop

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript

javascript 事件常用

今天复习下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" 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 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">

<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.onmousemove=documentMouseMove;
	}
  //-->
  </SCRIPT>
 </HEAD>

 <BODY onload="pageOnLoad()">
  X:<div id="positionX"></div>
  Y:<div id="positionY"></div>
 </BODY>
</HTML>