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 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
JS实现匀速运动的代码实例
Nov 29 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
form表单数据封装成json格式并提交给服务器的实现方法
Dec 14 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
浅谈webpack-dev-server的配置和使用
May 17 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 Javascript
Nuxt页面级缓存的实现
Mar 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
joomla jce editor 解决上传中文名文件失败问题
2013/06/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
ThinkPHP框架实现数据增删改
2017/05/07 PHP
php利用ZipArchive类操作文件的实例
2020/01/21 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
建立良好体验度的Web注册系统ajax
2007/07/09 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
vue v-on监听事件详解
2017/05/17 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
AngularJs分页插件使用详解
2018/06/30 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
python执行外部程序的常用方法小结
2015/03/21 Python
Python字符串详细介绍
2015/05/09 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
python实现简易云音乐播放器
2018/01/04 Python
Python实现学生成绩管理系统
2020/04/05 Python
python实现简单井字棋小游戏
2020/03/05 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
毕业生个人求职自荐信
2014/02/26 职场文书
2014年寒假社会实践活动心得体会
2014/04/07 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python