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使用技巧精萃[代码非常实用]
Nov 21 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
js实现大转盘抽奖游戏实例
Jun 24 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 Javascript
原生JS中应该禁止出现的写法
May 05 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
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
php-fpm重启导致的程序执行中断问题详解
2019/04/29 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
如何让DIV可编辑、可拖动示例代码
2013/09/18 Javascript
用jquery写的一个万年历(自写)
2014/01/20 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
bootstrapValidator自定验证方法写法
2016/12/01 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
webpack使用 babel-loader 转换 ES6代码示例
2017/08/21 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
2018/04/14 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
js简单粗暴的发布订阅示例代码
2021/01/23 Javascript
Python中的is和id用法分析
2015/01/26 Python
Python实现把回车符\r\n转换成\n
2015/04/23 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python实战教程之自动扫雷
2018/07/13 Python
python的sorted用法详解
2019/06/25 Python
在python里面运用多继承方法详解
2019/07/01 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
AVON雅芳官网:世界上最大的美容化妆品公司之一
2016/11/02 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
社区庆八一活动方案
2014/02/02 职场文书
2015大学生实训报告
2014/11/05 职场文书
小兵张嘎观后感
2015/06/03 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
JavaScript继承的三种方法实例
2021/05/12 Javascript
Flask搭建一个API服务器的步骤
2021/05/28 Python