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+="\nusername不能为空！"
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="#">
username：<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,则该keyword引用该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="button1"/>
<input type="button" id="bt2" value="button2"/>
<div id="show"></div>
<script type="text/javascript">
//第一个button被单击时的事件处理函数
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);
}//定义第二个button被单击时的事件处理函数
var goClick=function(evt){
document.getElementById("show").innerHTML+='事件冒泡阶段:'+evt.currentTarget.value+"<br/>";
}
//分别为两个button绑定事件处理函数
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>