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 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
跟着JQuery API学Jquery 之二 属性
Apr 09 Javascript
js取消单选按钮选中并判断对象是否为空
Nov 14 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JavaScript利用HTML DOM进行文档操作的方法
Mar 28 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
May 05 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
VUE解决 v-html不能触发点击事件的问题
Oct 28 Javascript
Js代码中的span拼接问题解决
Nov 22 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 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的一个登录的类 [推荐]
2007/03/16 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
php 自定义错误日志实例详解
2016/11/12 PHP
PHP面向对象学习之parent::关键字
2017/01/18 PHP
PHP中常用的魔术方法
2017/04/28 PHP
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
JavaScript数据推送Comet技术详解
2016/04/07 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
webpack入门必知必会
2017/01/16 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
python清理子进程机制剖析
2017/11/23 Python
python的socket编程入门
2018/01/29 Python
python时间日期函数与利用pandas进行时间序列处理详解
2018/03/13 Python
python爬虫获取百度首页内容教学
2018/12/23 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
露营世界:Camping World
2017/02/02 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
员工拓展培训方案
2014/02/15 职场文书
铲车司机岗位职责
2014/03/15 职场文书
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
Oracle 触发器trigger使用案例
2022/02/24 Oracle
详解flex:1什么意思
2022/07/23 HTML / CSS