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.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
js中的事件捕捉模型与冒泡模型实例分析
Jan 10 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
Jquery 效果使用详解
Nov 23 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
xmlplus组件设计系列之分隔框(DividedBox)(8)
May 02 Javascript
如何理解Vue的.sync修饰符的使用
Aug 17 Javascript
vue实现给div绑定keyup的enter事件
Jul 31 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
大师制作的中短波矿石收音机
2020/04/02 无线电
php zend 相对路径问题
2009/01/12 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP实现财务审核通过后返现金额到客户的功能
2019/07/04 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
js indexOf()定义和用法
2012/10/21 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
js使用html()或text()方法获取设置p标签的显示的值
2014/08/01 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
如何自定义微信小程序tabbar上边框的颜色
2019/07/09 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python的词法分析与语法分析
2013/05/18 Python
python函数参数*args**kwargs用法实例
2013/12/04 Python
用python代码做configure文件
2014/07/20 Python
深入讲解Java编程中类的生命周期
2016/02/05 Python
python使用 cx_Oracle 模块进行查询操作示例
2019/11/28 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
python matplotlib库的基本使用
2020/09/23 Python
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
工地食品安全责任书
2015/05/09 职场文书
实施意见格式范本
2015/06/05 职场文书
煤矿安全学习心得体会
2016/01/18 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP