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之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
记录几个javascript有关的小细节
Apr 02 Javascript
关于Javascript 对象(object)的prototype
May 09 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
js表单登陆验证示例
Oct 19 Javascript
javascript ES6 新增了let命令使用介绍
Jul 07 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
Openlayers实现点闪烁扩散效果
Sep 24 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
JS+CSS实现动态时钟
Feb 19 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jquery ajax中使用jsonp的限制解决方法
2013/11/22 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js select option对象小结
2013/12/20 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
javascript中 try catch用法
2015/08/16 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Vue全局分页组件的实现代码
2018/08/10 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
python调用cmd命令行制作刷博器
2014/01/13 Python
Python复制文件操作实例详解
2015/11/10 Python
pyqt5的QWebEngineView 使用模板的方法
2018/08/18 Python
Python列表切片操作实例总结
2019/02/19 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
do you have any Best Practice for testing
2016/06/04 面试题
后勤自我鉴定
2013/10/13 职场文书
职称自我鉴定
2013/10/15 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
学习教师法的心得体会
2014/09/03 职场文书
先进教师事迹材料
2014/12/16 职场文书
故宫英文导游词
2015/01/31 职场文书