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
最新文章
- ABAP实现屏幕自己刷新和跳转功能
- 初入网络系列笔记(6)TFTP协议
- WebForm 页面传值
- linux上配置网络/安装vsftp服务器
- Linux 高可用开源方案 Keepalived VS Heartbeat对比
- windows下gvim与gcc的一键环境的搭建
- SpringMVC后缀
- Android webview 取得javascript返回值
- 一样的Android,不一样的学习
- YARN环境搭建 之 一:CentOS7.0系统配置
- POJ1671 动态规划
- Python多线程下的_strptime问题
- C++学习笔记33 转换操作符
- Javascript DOM 编程艺术———总结-2
- JavaScript学习点滴 call、apply的区别
- UML小白入门基础教程
- shell脚本学习-循环
- jquery重置表单
- day1 hbuilder的使用
- pandas删除行删除列,增加行增加列
热门文章
- simple-framework(MaliSDK框架分析)
- web前端和后端的区别
- TC SRM 597 DEV2
- [App Store Connect帮助]五、管理构建版本(2)查看构建版本和文件大小
- 洛谷 P1865 A % B Problem(求区间质数个数)
- [SDOI2009]学校食堂
- Hdu 3487 play the chain
- 题解报告:hdu 2612 Find a way(双bfs)
- ACM_N皇后问题
- 解决WebSocket后台报错:The WebSocket session [0] has been closed and no method (apart from close()) may be called on a closed session