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 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
JavaScript数据存储 Cookie篇
Jul 02 Javascript
jQuery实现页面倒计时并刷新效果
Mar 13 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
详解webpack require.ensure与require AMD的区别
Dec 13 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
基于VUE实现的九宫格抽奖功能
Sep 30 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
vue-loader中引入模板预处理器的实现
Sep 04 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
判断Keep-Alive模式的HTTP请求的结束的实现代码
2011/08/06 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Bootstrap基本组件学习笔记之面板(14)
2016/12/08 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
2017/03/14 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
2018/08/24 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
浅谈python迭代器
2017/11/08 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python求质数的3种方法
2018/09/28 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
西班牙伏林航空公司:Vueling
2016/08/05 全球购物
您的健身减肥和健康饮食专家:vitafy
2017/06/06 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
2014两会学习心得:时代的发展
2014/03/17 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
python3美化表格数据输出结果的实现代码
2021/04/14 Python
分析MySQL抛出异常的几种常见解决方式
2021/05/18 MySQL
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
Python实现自动玩连连看的脚本分享
2022/04/04 Python
vue特效之翻牌动画
2022/04/20 Vue.js