JavaScript--基于对象的脚本语言学习笔记(三)

事件处理器

1、一个数据校验表单的例程

<html>
	<head>
		<title>js练习</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
			String.prototype.trim=function(){
			  return this.replace(/^\s*/,"").replace(/\s*$/,"");
			}
			//处理表单submit事件的函数
			var check=function(){
				var form=document.forms[0];
				var errStr="";
				if(form.user.value==null||form.user.value.trim()==""){
					errStr+="\n用户名不能为空!"
					form.user.focus();
				}
				if(form.pass.value==null||form.pass.value.trim()==""){
					errStr+="\n密码不能为空!"
					form.pass.focus();
				}
				
				if(form.email.value==null||form.email.value.trim()==""){
					errStr+="\n邮件不能为空!"
					form.email.focus();
				}
				if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(form.email.value.trim())){
					errStr+="\n邮件格式不对!!"
					form.email.focus();				
			    }
				
				if(errStr!=""){
					alert(errStr);
					return false;
				}else{
					alert("验证成功!");
				}
			};
		</script>
	</head>


	<body id="body">		
		<div>
		<h2>数据校验表单</h2>
		<form id="register" name="register" method="post" onsubmit="return check(this);" action="#">
		用户名:<input type="text" name="user"/><br/>
		密 码:<input type="password" name="pass"/><br/>
		电 邮:<input type="text" name="email"/><br/>
		<input type="submit" value="提交"/><br/><hr/>
		</form>
		</div>
	</body>
</html>
//也可以通过绑定DOM对象属性来设置事件处理函数。只要在js脚本最后添加一行:document.forms[0].onsubmit=check;
2、当为HTML元素的onclick等属性指定一系列JavaScript脚本时,如果在这些js脚本中使用this,则该关键字引用该HTML元素本身 当为DOM对象的onclick属性指定一个JavaScript函数引用时,如果在函数中使用this,该this也是引用该DOM对象本身
3、DOM提供了一种事件绑定机制:addEventListener()
   语法为:objectTarget.addEventListener("eventType",handler,captureFlag)
   与addEventListener()方法相对应,DOM也提供了一个方法用于删除事件处理器:removeEventListener()
   语法为:objectTarget.removeEventListener("eventType",handler,captureFlag)
   在DOM事件模型中当浏览器检测到发生了某个事件时,将自动创建一个Event对象,并隐式地将该对象作为事件处理函数的第一个参数传入
4、一个DOM转发事件例程(非IE)
<html>
	<head>
		<title>js练习</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body id="body">		
		<input type="button" id="bt1" value="按钮1"/>
		<input type="button" id="bt2" value="按钮2"/>
		<div id="show"></div>
		<script type="text/javascript">
			//第一个按钮被单击时的事件处理函数
			var rd=function(evt){
				document.getElementById("show").innerHTML+='事件冒泡阶段:'+evt.currentTarget.value+"被击中了<br/>";
				//创建一个普通事件
				var e=document.createEvent("Events");
				//初始化事件对象,指定该事件支持冒泡,不允许取消默认行为
				e.initEvent("click",true,false);
				//将事件转发到bt2
				document.getElementById("bt2").dispatchEvent(e);
			}


			//定义第二个按钮被单击时的事件处理函数
			var goClick=function(evt){
				document.getElementById("show").innerHTML+='事件冒泡阶段:'+evt.currentTarget.value+"<br/>";
			}
			//分别为两个按钮绑定事件处理函数
			document.getElementById("bt1").addEventListener("click",rd,false);
			document.getElementById("bt2").addEventListener("click",goClick,false);
		</script>
	</body>
</html>


5、取消事件的默认行为
   DOM也提供了取消事件默认行为的方法,DOM中的事件对象都提供了preventDefault()方法,该方法不需要参数,只要执行了给定事件的      preventDefault方法,该事件的默认行为将失效。
	<body id="body">		
		友情链接:<br/>
		<a id="mylink" href="http://www.njue.edu.cn">财经大学</a>
		<script type="text/javascript">
			var killClicks=function(event){
				event.preventDefault();//这句话导致点击超链接不会跳转
				alert("超链接被单击");
			}
			document.getElementById("mylink").addEventListener("click",killClicks,true);			
		</script>
	</body>
  //上面的代码虽然使用preventDefault方法取消了事件的默认行为,但是并未阻止处理函数的执行,也不会影响事件的传播
  //下面的代码为超链接和document在事件传播阶段绑定了事件处理函数,将会得到执行
 	<body id="body">		
		友情链接:<br/>
		<a id="mylink" name="我的超链接" href="http://www.njue.edu.cn">财经大学</a>
		<div id="show"></div>
		<script type="text/javascript">
			var killClicks=function(event){
				event.preventDefault();//这句话导致点击超链接不会跳转
				alert("超链接被单击");
				document.getElementById("show").innerHTML+="事件捕获阶段:"+event.currentTarget+"<br/>";
			}
			document.getElementById("mylink").addEventListener("click",killClicks,true);	
			document.addEventListener("click",killClicks,true);//为document绑定事件处理函数
		</script>
	</body>

你可能感兴趣的:(JavaScript--基于对象的脚本语言学习笔记(三))