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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
用javascript实现自定义标签
May 08 Javascript
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
js输出列表实现代码
Sep 12 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
JavaScript标准对象_动力节点Java学院整理
Jun 27 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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程序员的技术瓶颈分析
2011/07/17 PHP
php的array数组和使用实例简明教程(容易理解)
2014/03/20 PHP
php使用socket post数据到其它web服务器的方法
2015/06/02 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
PHP-FPM和Nginx的通信机制详解
2019/02/01 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
javascript制作loading动画效果 loading效果
2014/01/14 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
JS实战篇之收缩菜单表单布局
2016/12/10 Javascript
JavaScript获取select中text值的方法
2017/02/13 Javascript
微信小程序实现全局搜索代码高亮的示例
2018/03/30 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
基于python实现百度语音识别和图灵对话
2020/11/02 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
中层干部岗位职责
2013/12/18 职场文书
国窖1573广告词
2014/03/21 职场文书
学校师德师风整改方案
2014/10/28 职场文书
入党转正介绍人意见
2015/06/03 职场文书
学校运动会通讯稿
2015/07/18 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
Vue监视数据的原理详解
2022/02/24 Vue.js