JavaScript事件及应用

1.JavaScript事件的注册

在JavaScript中注册事件通常使用下面两种方法。

<1>将事件绑定到页面元素的属性

<2>将事件绑定到对象的属性

2.JavaScript中常用的事件

JavaScript中基本的事件模型

事件	事件触发时机
onblur	元素失去焦点后
onchange	元素值发生改变且已失去焦点后
onclick	鼠标在元素上单击时
ondblclick	鼠标在元素上双击时
onfocus	元素获得焦点
onkeydown	键盘上某个键被按下时
onkeypress	键盘上某个键被按下并且释放时
onkeyup	键盘上某个键被弹起时
onload	对象装载完毕时
onmousedown	在元素上按下鼠标时
onmousemove	在元素上移动鼠标指针时
onmouseout	鼠标指针移除元素时
onmouseover	鼠标指针移动到元素上方时
onmouseup	在元素上释放鼠标时
onreset	表单被重置时
onselect	文本内容被选择时
onsubmit	表单被提交时
onunload	对象被卸载时

例题：

<script type="text/javascript">
		function checkUname(){
			var reg =/^[a-zA-Z]{6,}$/
			var username=document.getElementById("uname").value
		    if(reg.test(username)){
			document.getElementById("msg1").innerHTML="用户名格式正确"
			return true
			}else{
			document.getElementById("msg1").innerHTML="用户名格式不正确"	
			return false
			}
		}
		//密码和确认密码格式都必须由数字，字母下滑线组成且长度必须在六位以上
		function checkPwd(n){
			var pwd1 =document.getElementById("pwd1").value
			var pwd2 =document.getElementById("pwd2").value
			var reg=/^\w{6,}$/
			if(n==1){
				if(reg.test(pwd1)){
				document.getElementById("msg2").innerHTML="密码格式正确"
				return true 
			}else{
				document.getElementById("msg2").innerHTML="密码格式不正确"
				return false
			}
			
		}else{
			if(reg.test(pwd2)){
				document.getElementById("msg3").innerHTML="确认密码格式正确"
				return true 
			}else{
				document.getElementById("msg3").innerHTML="确认密码格式不正确"
				return false
			}
		  }
		}
		//用来判断密码和确认密码是否一致
		function checkEquals(){
			var pwd1 =document.getElementById("pwd1").value
			var pwd2 =document.getElementById("pwd2").value
			//验证确认密码的格式是否正确
			if(checkPwd(2)){
				if(pwd1==pwd2){
					document.getElementById("msg3").innerHTML="密码与确认密码格式一致"
					return true 	
				}else{
					document.getElementById("msg3").innerHTML="密码与确认密码格式不一致"
					return false
				
				}
			}
		}
	</script>

3.表单元素下拉列

属性	value	被选中项的value值
	length	下拉选项的个数
	selectedlndex	选中项的索引，可以修改选中项
	options	所有下拉选项的数组
事件	onblur	下拉列表失去焦点时触发
	onfocus	下拉列表获得焦点时触发
	onchange	选项发生改变时触发

//城市下拉列表框
<script type="text/javascript">
		function changeOpt(){
			var cityList=new Array();
		     cityList['请选择省份']=['--请选择城市--'];
			 cityList['河南省']=['郑州','开封','洛阳','南阳','周口'];
			 cityList['四川省']=['成都','绵阳','德阳','自贡','泸州'];
			 //获取省份下拉列表
			 var province=document.getElementById("province").value
			 document.getElementById("cities").options.length=0
			 for(var i=0;i<cityList[province].length;i++){
				 var opt=new Option(cityList[province][i],cityList[province][i])
				 document.getElementById("cities").options.add(opt)
			 }
		}
</script>