事件处理器

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--基于对象的脚本语言学习笔记(三)的更多相关文章

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

    1.两种嵌入js的方式    使用javascript前缀构建url:<a href="javascript:alert('执行JavaScript. .')">执行j ...

  2. Go语言学习笔记三： 常量

    Go语言学习笔记三: 常量 定义常量 常量就是在声明后不能再修改的量. const x int = 100 const y string = "abc" const z = &qu ...

  3. InstallShield 脚本语言学习笔记

    InstallShield脚本语言是类似C语言,利用InstallShield的向导或模板都可以生成基本的脚本程序框架,可以在此基础上按自己的意愿进行修改和添加.     一.基本语法规则      ...

  4. 【GO】GO语言学习笔记三

    7.数组: 几乎是最常用的数据类型了... 数组就是指一系列同一类型数据 的集合.数组中包含的每个数据被称为数组元素(element),一个数组包含的元素个数被称为数 组的长度. 常规的数组声明方法: ...

  5. Go语言学习笔记(三) [控制结构、内建函数]

    日期:2014年7月21日   一.控制结构   1.Go中,只有几个控制结构,它没有do或者while循环,有for,灵活的switch语句和if,在switch中可以接受像for那样可选的初始化语 ...

  6. 【Linux_Shell 脚本编程学习笔记三、分支与循环结构】

    if 语句是实际生产工作中最重要且最常用的语句,所以,必须掌握牢固 if 条件语法 1. 单分支机构 if  [ 条件 ] then 指令 fi 或 if  [  条件 ]; then 指令 fi   ...

  7. [C语言学习笔记三]格式化输出和输入

    使用 printf 函数来输出,使用 scanf 函数来输入 在 printf 函数中使用变量,需要使用占位符代替. int 型一般存储整数,使用 %d 代替 long long int 型一般存储长 ...

  8. c语言学习笔记三

    第三章,函数 字符串函数 //strcmp int my_strcmp(char *str1,char *str2) {   while(*str1 = = *str2)   /*不可用while(* ...

  9. 基于python实现自动化办公学习笔记三

    Excel(1)写xls文件 # 有序字典from collections import OrderedDict# 存储数据from pyexcel_xls import save_data def ...

随机推荐

  1. uva 11992 为矩阵更新查询段树

    http://uva.onlinejudge.org/index.php? option=com_onlinejudge&Itemid=8&page=show_problem& ...

  2. xp硬盘安装Fedora14 过程记录及心得体会（fedora14 live版本680M 和fedora14 DVD版本3.2G的选择）

    这次电脑奔溃了,奇怪的是直接ghost覆盖c盘竟然不中.之前电脑上硬盘安装的fedora14操作系统,也是双系统.不知道是不是这个问题,记得同学说过,在硬盘装fedora之后,要手动修改c盘隐藏的那个 ...

  3. dm8148 jpeg编解码器测试

    测试过程: 1)于A8将jpeg传送到videoM3解码,然后,videoM3编码.在编译jpeg图像传输到A8,主要是测试jpeg编码的图像需要多少时间: 1000w像素:  编码时间:43ms. ...

  4. POJ - 3249 Test for Job （DAG+topsort）

    Description Mr.Dog was fired by his company. In order to support his family, he must find a new job ...

  5. Simple Automated Backups for MongoDB Replica Sets

    There are a bunch of different methods you can use to back up your MongoDB data, but if you want to ...

  6. JNI 可变印刷

    1.包log.h #ifndef __MULTI_TRACE_H__ #define __MULTI_TRACE_H__ #ifdef ANDROID_NDK_BUILD #define LOG_TA ...

  7. 未能加载文件或程序集“Common”或它的某一个依赖项。试图加载格式不正确的程序

    原因:操作系统是64位的,但发布的程序引用了一些32位的ddl,所以出现了兼容性的问题解决方案一:如果是64位机器,IIS——应用程序池——高级设置——启用32位应用程序 :true.解决方案二:修改 ...

  8. poj 2762 Going from u to v or from v to u? (推断它是否是一个薄弱环节图)

    意甲冠军:给定一个有向图有m单向边缘.免费推断是否两点起来(a可以b要么b可以a或最多彼此),该请求 弱联通重量. 算法: 缩点求强连通分量.然后又一次建图.推断新图是否是一条单链,即不能分叉,假设分 ...

  9. AWS发布架构师认证的专业解决方案

    完成Amazon EC2初始化几个例子就足够了,那么证明你的AWS建筑学专业技术需要长时间使用如何?AWS专业建筑师认证新颖的解决方案出炉! 2013年4月,AWS正式启动AWS认证计划,同时发布AW ...

  10. Chapter 1 Securing Your Server and Network(3):使用托管服务帐号

    原文:Chapter 1 Securing Your Server and Network(3):使用托管服务帐号 原文出处:http://blog.csdn.net/dba_huangzj/arti ...