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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
jQuery toggle()设置CSS样式
Nov 05 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
浅析JS运动
Dec 28 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
angularjs $http实现form表单提交示例
Jun 09 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
Aug 15 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
Aug 25 Javascript
vue路由传参三种基本方式详解
Dec 09 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中文URL编解码(urlencode()rawurlencode()
2010/07/03 PHP
深入PHP FTP类的详解
2013/06/13 PHP
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
PHP+MYSQL中文乱码问题
2015/07/01 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
JQuery日期插件datepicker的使用方法
2016/03/03 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
javascript实现页面的实时时钟显示示例
2020/08/06 Javascript
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python发送以整个文件夹的内容为附件的邮件的教程
2015/05/06 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
详解Python_shutil模块
2019/03/15 Python
python中os包的用法
2020/06/01 Python
scrapy redis配置文件setting参数详解
2020/11/18 Python
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
英国在线药房:Express Chemist
2019/03/28 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
说出你对remoting 和webservice的理解和应用
2014/06/08 面试题
个人简历自我鉴定
2013/10/11 职场文书
秘书岗位职责
2013/11/18 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
党支部书记先进事迹
2014/01/17 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
公安机关纪律作风整顿个人剖析材料材料
2014/10/10 职场文书
新兵入伍决心书
2015/09/22 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js