JavaScript中的事件处理

在JavaScript中，事件的发生主要是由窗口中内容变化、键盘和鼠标引起的。JavaScript在某些事件发生的时候，可以通过一些相应的事件处理器来捕获这些事件，并且可以对捕获的事件做出某种处理。

窗口事件

键盘事件

鼠标事件

窗口文档事件指的是窗口中的文档发生变化时候发生的事件，有两种的窗口文档事件：一种是当窗口装载（load）文档的时候，另一种是当窗口退出（unload）一个文档的时候。这个时候，可以通过onLoad事件处理器来捕获窗口装载文档的事件，或者使用onUnload事件处理器来捕获窗口退出文档的事件。

<HTML>
<HEAD>
	<TITLE>load/unload</TITLE>
	<Script language="JavaScript">
		function mytest()
		{
			alert("即将退出文档。");
		}
	</Script>
</HEAD>
<BODY onLoad="JavaScript:alert('即将装载文档。');"
onUnload="JavaScript:mytest();">

</BODY>
</HTML>

当光标的焦点集中到页面的某些表单元素的时候，将会发生聚焦（focus）事件，使用onFocus事件处理器可以捕获它。只有表单元素text、password、select和textarea有聚焦事件发生，所以，对于其他的表单元素，不会发生聚焦事件，使用onFocus事件处理器就不会起到效果。

<HTML>
<HEAD>
	<TITLE>focus</TITLE>
	<Script language="JavaScript">
		function focusHandle()
		{
			alert("光标聚焦到文本框");
		}
	</Script>
</HEAD>
<BODY>
	<FORM NAME="TEST">
		<INPUT TYPE="TEXT" NAME="UserName"
onFocus="JavaScript:focusHandle()">
	</FORM>
</BODY>
</HTML>

和聚焦事件相对的事件是失去焦点事件。当光标从某些表单元素中移出时，表单元素将失去焦点（blur），此时将会发生失去焦点事件。使用onBlur()处理器可以对这个事件进行处理。和聚焦事件类似，只有text、password、select和textarea有失去焦点事件发生。

<HTML>
<HEAD>
	<TITLE>blur</TITLE>
	<Script language="JavaScript">
		function blurHandle()
		{
			alert(document.TEST.UserName.value);
		}
	</Script>
</HEAD>
<BODY>
	<FORM NAME="TEST">
		<INPUT TYPE="TEXT" NAME="UserName"
 onBlur="JavaScript:blurHandle()">
	</FORM>
</BODY>
</HTML>

当我们在某个表单元素上点击的时候，将会发生点击（click）事件。我们可以通过onClick()处理器来处理这个事件。表单元素button、checkbox、radio、reset、submit以及超链接都有这个事件。

<HTML>
<HEAD>
	<TITLE>click</TITLE>
	<Script language="JavaScript">
		function validateForm()
		{
			if(confirm("你确认提交这个表单么？"))
			{
				document.TEST.submit();
			}
		}
	</Script>
</HEAD>
<BODY>
	<FORM NAME="TEST">
		<INPUT TYPE="TEXT" NAME="UserName">
		<BR>
		<INPUT TYPE="BUTTON" NAME="SUB" VALUE="提交"
onClick="JavaScript:validateForm()">
	</FORM>
</BODY>
</HTML>

当某些表单的内容发生改变的时候，将发生“（内容）改变”（change）事件。使用onChange()处理器可以处理对应的事件。表单元素select、text、password、textarea都有这个事件。

<HTML>
<HEAD>
	<TITLE>change</TITLE>
</HEAD>
<BODY>
	<FORM NAME="TEST">
		<INPUT TYPE="TEXT" NAME="UserName"
		onChange="JavaScript:alert('文本框内容已经改变！');">
		<BR>
		<SELECT NAME="Year"
		onChange="JavaScript:alert(this[this.selectedIndex].value);">
			<OPTION VALUE="1999">1999</OPTION>
			<OPTION VALUE="2000">1999</OPTION>
			<OPTION VALUE="2001">2001</OPTION>
			<OPTION VALUE="2002">2002</OPTION>
			<OPTION VALUE="2003">2003</OPTION>
			<OPTION VALUE="2004">2004</OPTION>
			<OPTION VALUE="2005">2005</OPTION>
		</SELECT>
		<BR>
	</FORM>
</BODY>
</HTML>

当选中表单元素中的文本内容时，将会发生“选择（select）”事件。表单元素text、textarea都会发生这个事件。

<HTML>
<HEAD>
	<TITLE>select</TITLE>
</HEAD>
<BODY>
	<FORM NAME="TEST">
		<INPUT TYPE="TEXT" NAME="UserName" value="JS编程基础"
onSelect="JavaScript:alert(this.value);">
		<BR>
	</FORM>
</BODY>
</HTML>

当表单提交的时候，会发生“表单提交”事件，可以通过onSubmit处理器来处理这个事件。除非onSubmit事件处理器返回的值是false，否则，表单将被提交。

<HTML>
<HEAD>
	<TITLE>select</TITLE>
	<Script language="JavaScript">
		function checkForm()
		{
			if(confirm("你确认提交表单么？"))
			{
				return true;
			}
			else
			{
				return false;
			}
		}
	</Script>
</HEAD>
<BODY>
	<FORM NAME="TEST" onSubmit="JavaScript:return checkForm();">
		<INPUT TYPE="TEXT" NAME="UserName" value="">
		<BR>
		<INPUT TYPE="SUBMIT" NAME="sub" value="提交表单">
	</FORM>
</BODY>
</HTML>

使用JavaScript可以在客户端对表单进行验证。假设我们有一个登录表单，它有两个元素：text和password，用于接收用户的用户名和密码。我们要求用户必需填写用户名和密码，否则肯定不能登录。如果我们在服务器端来验证，在实现上当然行得通，但是这种方式有一个弊端：如果用户没有输入用户名或者密码，那么他只有在提交到服务器端进行处理以后才可以得到错误信息，这无形中加重了服务器的负担，也浪费了带宽。所以通常情况下，我们会将一部分不涉及数据库的验证放到客户端来完成。通过JavaScript，我们就可以简单实现这个功能。

<HTML>
<HEAD>
	<TITLE>change</TITLE>
</HEAD>
<BODY>
	<FORM NAME="TEST" METHOD="post" ACTION="Login.jsp">
		用户名：<INPUT TYPE="TEXT" NAME="UserName">
		<BR>
		密码：<INPUT TYPE="PASSWORD" NAME="Pwd">
		<BR>
		<INPUT TYPE="BUTTON" VALUE="提交"
onClick="JavaScript:checkForm();">
	</FORM>
</BODY>
</HTML>
<Script language="JavaScript">
function checkForm()
{
	//定义一个变量，引用表单对象
	var theForm = document.TEST;
	if(theForm.UserName.value=="")
	{
		alert("请输入用户名！");
		theForm.UserName.focus();
	}
	else if(theForm.Pwd.value=="")
	{
		alert("请输入密码！");
		theForm.Pwd.focus();
	}
	else
	{
		theForm.submit();
	}
}
</Script

05JavaScript中的事件处理的更多相关文章

第38课 Qt中的事件处理（上）
1. GUI程序原理回顾 (1)图形界面应用程序的消息处理模型 (2)思考:操作系统发送的消息如何转变为Qt信号 2. Qt中的事件处理 (1)Qt平台将系统产生的消息转换为Qt事件 ①Qt事件是一个 ...
[转]理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
理解JavaScript中的事件处理
什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了.事件可能是用户在某些内容上的点击 ...
js中关于事件处理函数名后面是否带括号的问题
今天总结一个关于事件处理程序的小细节.首先回顾一下事件处理的一些概念. JS中的事件处理(事件绑定)就是让某种或某些事件触发某些活动.有两种常见的形式,分别是DOM Level 0 和DOM Leve ...
理解JavaScript中的事件处理阻止冒泡event.stopPropagation();
原文地址:http://www.cnblogs.com/binyong/articles/1750263.html 这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时 ...
Android菜鸟的成长笔记（11）——Android中的事件处理
原文:[置顶] Android菜鸟的成长笔记(11)——Android中的事件处理 Android提供了两种方式来处理事件,一个是基于回调的事件处理,另一个是基于监听的事件处理,举个例子: 基于回调的 ...
详解JavaScript中的事件处理
在漫长的演变史,我们已经告别了内嵌式的事件处理方式(直接将事件处理器放在HTML元素之内来使用),今天的事件,它已是DOM的重要组成部分,遗憾的是,IE继续保留它最早在IE4.0中实现的事件模型,以后 ...
Qt 中的事件处理（一）
1.图形界面应用程序的消息处理模型特点: 基于操作系统才能运行 GUI应用程序提供的功能必须由用户触发用户操作界面时操作系统是第一个感知的系统内核的消息通过事件处理转变成QT的信号 2. Qt中 ...
iOS中的事件处理
前言:iOS中事件处理,是一个非常重要也非常难得地方.涉及到响应者链的地方的面试题,非常多工作两三年的老鸟也未必能回答的非常专业.这里具体介绍一下iOS中的事件处理,以及响应者链. 1. 三大事件触 ...

随机推荐

Replica Sets+Sharding方案之真枪实弹篇
话说在虚拟机中会报各种错误.在真实的环境中就不会那么痛苦了. 想了一下虚拟机中报错的原因有. 机器卡,处理的时间长就会抛出错误还有虚拟机假设给的空间太小.也会报异常. 此处讲讲我的大致思路. 第一, ...
[Qt总结篇]终端远程升级client
环境: QT4.8.5 for Windows(Qt Creator+MinGW) 一.写在前面: 1.深度:鉴于C/C++的功底还远远不足,个人主要精力还是学习C/C++,所以没打算继续深入研究Qt ...
进程间通信之-共享内存Shared Memory--linux内核剖析（十一）
共享内存共享内存是进程间通信中最简单的方式之中的一个. 共享内存是系统出于多个进程之间通讯的考虑,而预留的的一块内存区. 共享内存同意两个或很多其他进程訪问同一块内存,就如同 malloc() 函数 ...
怎样处理Gradle中的这个文件下载慢的问题的
如图:在build.gradle中的dependencies中加上要依赖的包后,就点击sync gradle.然后就开始了下载.在此过程中我是FQ了的(在此同时我是可以用chrome进入https:/ ...
luence优化速度
一. .索引优化背景很多网站都有自己的搜索引擎,比如百度,搜狗等等,而他们每天添加的索引量可想而知多么庞大,所以为了能提升用户的搜索响应速度,好的优化方案必不可少:当然对于一些网站的站内搜索也很有必 ...
使用nginx搭建媒体点播服务器
使用nginx搭建媒体点播服务器最新由于兴趣,对ubuntu和安卓上的视频点播直播等应用比较感兴趣,所以在vmware的虚拟机里面搭建了一个视频点播网站,参考了fengzhanhai的文章Nginx ...
Patrik 音乐会的等待单调栈的迷茫回忆
STL 一定要学好一定要学好,一定要学好!!! 题目链接:https://www.luogu.org/problemnew/show/P1823 我们需要单向查找:用单调栈: 思路:维护一个身高单调 ...
window系统查看端口被哪个进程占用了
一.在windows命令行窗口下执行:运行--cmdC:\>netstat -aon|findstr "8080" TCP 127.0.0.1:80 0. ...
Spark GraphX 属性图操作
package Spark_GraphX import org.apache.spark.graphx._ import org.apache.spark.rdd.RDD import org.apa ...
sql数据库如何在数据库里面把其中一个数据库的表复制到另一个数据库里面
在sqlserver数据库里面,我们肯定有这样一个情况,假如我用的是SQL2008,如何把数据库里面的整个表以及表内数据复制到另外一个表中.那应该如何操作??有两种方法,我们一起来看一下复制表结构: ...