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>
JavaScript--基于对象的脚本语言学习笔记(三)的更多相关文章
- JavaScript--基于对象的脚本语言学习笔记(一)
1.两种嵌入js的方式 使用javascript前缀构建url:<a href="javascript:alert('执行JavaScript. .')">执行j ...
- Go语言学习笔记三： 常量
Go语言学习笔记三: 常量 定义常量 常量就是在声明后不能再修改的量. const x int = 100 const y string = "abc" const z = &qu ...
- InstallShield 脚本语言学习笔记
InstallShield脚本语言是类似C语言,利用InstallShield的向导或模板都可以生成基本的脚本程序框架,可以在此基础上按自己的意愿进行修改和添加. 一.基本语法规则 ...
- 【GO】GO语言学习笔记三
7.数组: 几乎是最常用的数据类型了... 数组就是指一系列同一类型数据 的集合.数组中包含的每个数据被称为数组元素(element),一个数组包含的元素个数被称为数 组的长度. 常规的数组声明方法: ...
- Go语言学习笔记(三) [控制结构、内建函数]
日期:2014年7月21日 一.控制结构 1.Go中,只有几个控制结构,它没有do或者while循环,有for,灵活的switch语句和if,在switch中可以接受像for那样可选的初始化语 ...
- 【Linux_Shell 脚本编程学习笔记三、分支与循环结构】
if 语句是实际生产工作中最重要且最常用的语句,所以,必须掌握牢固 if 条件语法 1. 单分支机构 if [ 条件 ] then 指令 fi 或 if [ 条件 ]; then 指令 fi ...
- [C语言学习笔记三]格式化输出和输入
使用 printf 函数来输出,使用 scanf 函数来输入 在 printf 函数中使用变量,需要使用占位符代替. int 型一般存储整数,使用 %d 代替 long long int 型一般存储长 ...
- c语言学习笔记三
第三章,函数 字符串函数 //strcmp int my_strcmp(char *str1,char *str2) { while(*str1 = = *str2) /*不可用while(* ...
- 基于python实现自动化办公学习笔记三
Excel(1)写xls文件 # 有序字典from collections import OrderedDict# 存储数据from pyexcel_xls import save_data def ...
随机推荐
- "UBUNTU: SAUCE: apparmor: 3.0 backport of apparmor3"
下面提供的commit是为了让nexus 4g的内核支持ubunt touch的一些功能. 链接地址如下: "UBUNTU: SAUCE: apparmor: 3.0 backport of ...
- 聊聊并发（六）——ConcurrentLinkedQueue的实现原理分析
1. 引言 在并发编程中我们有时候需要使用线程安全的队列.如果我们要实现一个线程安全的队列有两种实现方式:一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把 ...
- 请注意CSDN社区微通道，许多其他的精彩等着你
CSDN社区微信公众号"程序人生"(微信ID:coder_life)来了,每天我们会将CSDN社区中大量的优质内容浓缩成1~3篇文章.推送到您的手机中,让您不管何时何地都能感受到知 ...
- java.io.FileNotFoundException: /home/hadoop/hadoop/dfs/namenode/current/VERSION (Permission denied)
今天布置hadoop集群,尝试单独将secondarynamenode分属到一台独立的虚拟机上, 当格式化后,start-dfs.sh.namenode没启动.查看日志.报错例如以下 查看权限才发现, ...
- iOS：编译错误 linker command failed with exit code 1 (use -v to see invocation)
将project不加入.m要求加入 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMzI0MzQ2OQ==/font/5a6L5L2T/fontsi ...
- js“分享到”侧边框伸缩实现
思路: 1,临界值是 -150 和 0 如果大于临界值,就要隐藏 2,隐藏:速度为负 显示:速度为正 3,如果与临界值相等,就清空定时器 否则,就运动 ------------------------ ...
- C# 5.0 Async函数的提示和技巧
一.创建Async函数 Async是C# 5.0中新增的关键字,通过语法糖的形式简化异步编程,它有如下三种方式: async Task<T> MyReturningMethod { ret ...
- Unity3D方法来隐藏和显示对象
Unity3D作 在使用unity3d开发游戏的过程中.我们经常会遇到须要隐藏或者显示的操作,针对这一点,以下做了一些总结. 一.设置Renderer状态 在游戏的开发中,全部可以被渲染的物体都包括有 ...
- 【Linux探索之旅】第一部分第四课：磁盘分区，并完成Ubuntu安装
内容简介 1.第一部分第四课:磁盘分区,并完成Ubuntu安装 2.第一部分第五课预告:Unity桌面,人生若只如初见 磁盘分区 上一课我们正式开始安装Ubuntu了,但是到了分区的那一步,小编却戛然 ...
- GotoTest
循环标签跳出循环 public class GotoTest { public static void main(String[] args) { int[][] array={ {1,20,3}, ...