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 相关文章推荐
DOM 基本方法
Jul 18 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
js动态切换图片的方法
Jan 20 Javascript
javascript正则表达式基础知识入门
Apr 20 Javascript
jQuery实现强制cookie过期方法汇总
May 22 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
在vue-cli中组件通信的方法
Dec 16 Javascript
详解如何在vue项目中使用layui框架及采坑
May 05 Javascript
解决vue页面渲染但dom没渲染的操作
Jul 27 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
一个简易需要注册的留言版程序
2006/10/09 PHP
php学习笔记 php中面向对象三大特性之一[封装性]的应用
2011/06/13 PHP
PHP自动重命名文件实现方法
2014/11/04 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
如何获取网站icon有哪些可行的方法
2014/06/05 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
JQUERY表单暂存功能插件分享
2016/02/23 Javascript
jquery 动态合并单元格的实现方法
2016/08/26 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
利用Plupload.js解决大文件上传问题, 带进度条和背景遮罩层
2017/03/15 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
jQuery+PHP实现上传裁剪图片
2020/06/29 jQuery
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
[58:11]守擂赛第二周擂主赛 DeMonsTer vs Leopard
2020/04/28 DOTA
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
Python 异常处理实例详解
2014/03/12 Python
Python字典操作简明总结
2015/04/13 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Flask-WTF表单的使用方法
2019/07/12 Python
Django实现celery定时任务过程解析
2020/04/21 Python
Python流程控制语句的深入讲解
2020/06/15 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
Django中ORM的基本使用教程
2020/12/22 Python
python urllib和urllib3知识点总结
2021/02/08 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
如何用Java判断一个文件或目录是否存在
2012/11/19 面试题
马丁路德金演讲稿
2014/05/19 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
副总经理岗位职责范本
2015/04/08 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers