JavaScript 中的事件教程


Posted in Javascript onApril 05, 2007

事件是可以被JavaScript侦测到的行为。
事件
JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。

网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说,我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。

事件举例:
鼠标点击 
页面或图像载入 
鼠标悬浮于页面的某个热点之上 
在表单中选取输入框 
确认表单 
键盘按键 
注意:事件通常与函数配合使用,当事件发生时函数才会执行。

如果需要更全面的关于Javascript可识别的事件的知识,请阅读我们的完整版《事件参考手册》。
onload 和 onUnload
当用户进入或离开页面时就会触发onload 和 onUnload事件。

onload事件常用来检测访问者的浏览器类型和版本,然后根据这些信息载入特定版本的网页。

onload 和 onUnload事件也常被用来处理用户进入或离开页面时所建立的cookies。例如,当某用户第一次进入页面时,你可以使用消息框来询问用户的姓名。姓名会保存在cookie中。当用户再次进入这个页面时,你可以使用另一个消息框来和这个用户打招呼:"Welcome John Doe!"。
onFocus, onBlur 和 onChange
onFocus、onBlur和onChange事件通常相互配合用来验证表单。

下面是一个使用onChange事件的例子。用户一旦改变了域的内容,checkEmail()函数就会被调用。

<input type="text" size="30" id="email" onchange="checkEmail()">onSubmit
onSubmit用于在提交表单之前验证所有的表单域。

下面是一个使用onSubmit事件的例子。当用户单击表单中的确认按钮时,checkForm()函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm()函数的返回值是true或者false。如果返回值为true,则提交表单,反之取消提交。

<form method="post" action="xxx.htm" onsubmit="return checkForm()">onMouseOver 和 onMouseOut
onMouseOver 和 onMouseOut用来创建“动态的”按钮。

下面是一个使用onMouseOver事件的例子。当onMouseOver事件被脚步侦测到时,就会弹出一个警告框:

<a href="http://www.w3school.com.cn"
onmouseover="alert('An onMouseOver event');return false">

<img src="w3schools.gif" width="100" height="30">

</a>

Javascript 相关文章推荐
js form action动态修改方法
Nov 04 Javascript
JS setCapture 区域外事件捕捉
Mar 18 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
javascript 通用简单的table选项卡实现
May 07 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
js 判断一个元素是否在页面中存在
Dec 27 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
JavaScript While 循环基础教程
Apr 05 #Javascript
脚本之家贴图转换+转贴工具用到的js代码超级推荐
Apr 05 #Javascript
javascript判断单选框或复选框是否选中方法集锦
Apr 04 #Javascript
javascript中巧用“闭包”实现程序的暂停执行功能
Apr 04 #Javascript
ArrayList类(增强版)
Apr 04 #Javascript
Javascript中的数学函数
Apr 04 #Javascript
Some tips of wmi scripting in jscript (1)
Apr 03 #Javascript
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
mysql 搜索之简单应用
2007/04/27 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
详解WordPress中添加友情链接的方法
2016/05/21 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
IE DOM实现存在的部分问题及解决方法
2009/07/25 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
Javascript基础教程之数据类型 (字符串 String)
2015/01/18 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
微信小程序获取当前位置和城市名
2019/11/13 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题
2020/11/04 Javascript
Python3简单实例计算同花的概率代码
2017/12/06 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
python实现换位加密算法的示例
2018/10/14 Python
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python装饰器简介---这一篇也许就够了(推荐)
2019/04/01 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python标准库OS模块详解
2020/03/10 Python
Sql面试题
2013/03/20 面试题
Servlet面试题库
2015/07/18 面试题
班组长的岗位职责
2013/12/09 职场文书
入党积极分子思想汇报
2014/01/02 职场文书
民政工作个人总结
2015/02/28 职场文书
给下属加薪申请报告
2015/05/15 职场文书
孟佩杰观后感
2015/06/17 职场文书
遗失证明范文
2015/06/19 职场文书
go语言中json数据的读取和写出操作
2021/04/28 Golang
PyTorch device与cuda.device用法
2022/04/03 Python