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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
XP折叠菜单&amp;仿QQ2006菜单
Dec 16 Javascript
一页面多XMLHttpRequest对象
Jan 22 Javascript
[原创]js获取数组任意个不重复的随机数组元素
Mar 15 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JavaScript中const、var和let区别浅析
Oct 11 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
ES6学习之变量的两种命名方法示例
Jul 18 Javascript
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十四)
2014/06/26 PHP
PHP中exec与system用法区别分析
2014/09/22 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
JS实现一键回顶功能示例代码
2013/10/28 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
tab栏切换原理
2017/03/22 Javascript
利用ECharts.js画K线图的方法示例
2018/01/10 Javascript
React Navigation 使用中遇到的问题小结
2018/05/08 Javascript
webpack之引入图片的实现及问题
2018/10/08 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
python实现可视化动态CPU性能监控
2018/06/21 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
京东国际站:JOYBUY
2017/11/23 全球购物
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
人民教师求职自荐信
2014/03/12 职场文书
业务内勤岗位职责
2014/04/30 职场文书
会计工作总结范文2014
2014/12/23 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
网吧员工管理制度
2015/08/05 职场文书
外出培训学习心得体会
2016/01/18 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript