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 相关文章推荐
在jquery中的ajax方法怎样通过JSONP进行远程调用
Apr 04 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript操作ul中li的方法
May 14 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
解决在Bootstrap模糊框中使用WebUploader的问题
Mar 22 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
Aug 06 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
2013/05/17 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery实现的导航条切换可显示隐藏
2014/10/22 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
Javascript基础回顾之(一) 类型
2017/01/31 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
JavaScript的继承实现小结
2017/05/07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
bootstrap fileinput插件实现预览上传照片功能
2018/01/23 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
JsonServer安装及启动过程图解
2020/02/28 Javascript
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python设计模式之抽象工厂模式
2016/08/25 Python
Python 实现随机数详解及实例代码
2017/04/15 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
python 重命名轴索引的方法
2018/11/10 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
python 瀑布线指标编写实例
2020/06/03 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
花卉与景观设计系大学生求职信
2013/10/01 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
离婚协议书范文2014
2014/10/16 职场文书
搞笑Gif:这么白这么长的腿像极了一楼的女朋友
2022/03/21 杂记