05JavaScript中的事件处理
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. 三大事件 触 ...
随机推荐
- js 对有“命名空间”的表单做深度解析
问题描写叙述:一个大表单中,可能包括几十个字段.这些字段在数据库中的映射非常可能不在一张表中,为了降低后台操作的工作量,我们应该在前台提交的时候对数据做初步处理. 举例说明: watermark/2/ ...
- Android仿微信朋友圈图片查看器
转载请注明出处:http://blog.csdn.net/allen315410/article/details/40264551 看博文之前,希望大家先打开自己的微信点到朋友圈中去,细致观察是不是发 ...
- Python的lambda函数与排序
Python的lambda函数与排序 2010-03-02 15:02 2809人阅读 评论(0) 收藏 举报 lambdapythonlistlispclass工作 目录(?)[+] 前几天 ...
- mongodb配置复制集replset
Mongodb的replication主要有两种:主从和副本集(replica set).主从的原理和mysql类似,主节点记录在其上的所有操作oplog,从节点定期轮询主节点获取这些操作,然后对自己 ...
- 怎么查询数据库中第30到40条记录呢? 通过ID,查询当前第30-40条记录 注意,ID不是顺序的
http://blog.csdn.net/lee576/article/details/5812347 http://bbs.csdn.net/topics/190070614 http://www. ...
- JFreeChart简单用法
需要用到的包 jfreechart-0.9.20.jar,jcommon-0.9.5.jar 创建一般步骤: 1.生成org.jfree.data.DefaultCategoryDataset对象,方 ...
- openstack horizon 学习(2) navigation、dashboard、panels
本章的主要内容是如何用horizon的navigation结构添加一个应用的面板. Horizon中提供了两种为应用添加panel的方法,一种是通过Pluggable Settings的方式,另一种是 ...
- SQL Server 方言类型映射问题
关于SQL Server的类型映射问题,例如,nvarchar无法进行hibernate类型映射,需要通过convert进行类型转换方可进行获取
- E20171106-hm
pulldown adj. 折叠式的; pulldown menu 下拉菜单
- 题解报告:hdu 3501 Calculation 2 (欧拉函数的扩展)
Description Given a positive integer N, your task is to calculate the sum of the positive integers l ...