JavaScript中的事件处理


Posted in Javascript onJanuary 16, 2008

事件处理概述

 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情。
指定事件处理程序有三种方法:
方法一 直接在 HTML 标记中指定。这种方法是用得最普遍的。方法是:
<标记 ... ... 事件="事件处理程序" [事件="事件处理程序" ...]>

让我们来看看例子:
<body ... onload="alert('网页读取完成,请慢慢欣赏!')" onunload="alert('再见!')">

这样的定义<body>标记,能使文档读取完毕的时候弹出一个对话框,写着“网页读取完成,请慢慢欣赏”;在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候弹出“再见”。
方法二 编写特定对象特定事件的 JavaScript。这种方法用得比较少,但是在某些场合还是很好用的。方法是:
<script language="JavaScript" for="对象" event="事件"> 
...
(事件处理程序代码)
...
</script>

<script language="JavaScript" for="window" event="onload">
  alert('网页读取完成,请慢慢欣赏!');
</script>

方法三 在 JavaScript 中说明。方法:
<事件主角 - 对象>.<事件> = <事件处理程序>;

用这种方法要注意的是,“事件处理程序”是真正的代码,而不是字符串形式的代码。如果事件处理程序是一个自定义函数,如无使用参数的需要,就不要加“()”。
function ignoreError() {
  return true;
}
window.onerror = ignoreError; // 没有使用“()”

这个例子将 ignoreError() 函数定义为 window 对象的 onerror 事件的处理程序。它的效果是忽略该 window 对象下任何错误(由引用不允许访问的 location 对象产生的“没有权限”错误是不能忽略的)。

事件详解

onblur 事件 发生在窗口失去焦点的时候。应用于:window 对象

onchange 事件 发生在文本输入区的内容被更改,然后焦点从文本输入区移走之后。捕捉此事件主要用于实时检测输入的有效性,或者立刻改变文档内容。应用于:Password 对象;Select 对象;Text 对象;Textarea 对象

onclick 事件 发生在对象被单击的时候。单击是指鼠标停留在对象上,按下鼠标键,没有移动鼠标而放开鼠标键这一个完整的过程。一个普通按钮对象(Button)通常会有 onclick 事件处理程序,因为这种对象根本不能从用户那里得到任何信息,没有 onclick 事件处理程序就等于废柴。按钮上添加 onclick 事件处理程序,可以模拟“另一个提交按钮”,方法是:在事件处理程序中更改表单的 action, target, encoding, method 等一个或几个属性,然后调用表单的 submit() 方法。在 Link 对象的 onclick 事件处理程序中返回 false 值(return false),能阻止浏览器打开此连接。即,如果有一个这样的连接:<a href="http://www.a.com" onclick="return false">Go!</a>,那么无论用户怎样点击,都不会去到 www.a.com 网站,除非用户禁止浏览器运行 JavaScript。应用于:Button 对象;Checkbox 对象;Image 对象;Link 对象;Radio 对象;Reset 对象;Submit 对象

onerror 事件 发生在错误发生的时候。它的事件处理程序通常就叫做“错误处理程序”(Error Handler),用来处理错误。上边已经介绍过,要忽略一切错误,就使用:
function ignoreError() {
  return true;
}
window.onerror = ignoreError;

应用于:window 对象

onfocus 事件 发生在窗口得到焦点的时候。应用于:window 对象

onload 事件 发生在文档全部下载完毕的时候。全部下载完毕意味着不但 HTML 文件,而且包含的图片,插件,控件,小程序等全部内容都下载完毕。本事件是 window 的事件,但是在 HTML 中指定事件处理程序的时候,我们是把它写在<body>标记中的。应用于:window 对象

onmousedown 事件 发生在用户把鼠标放在对象上按下鼠标键的时候。参考 onmouseup 事件。应用于:Button 对象;Link 对象

onmouseout 事件 发生在鼠标离开对象的时候。参考 onmouseover 事件。应用于:Link 对象

onmouseover 事件 发生在鼠标进入对象范围的时候。这个事件和 onmouseout 事件,再加上图片的预读,就可以做到当鼠标移到图像连接上,图像更改的效果了。有时我们看到,在指向一个连接时,状态栏上不显示地址,而显示其它的资料,看起来这些资料是可以随时更改的。它们是这样做出来的:
<a href="..." onmouseover="window.status='Click Me Please!'; return true;" onmouseout="window.status=''; return true;">

应用于:Link 对象

onmouseup 事件 发生在用户把鼠标放在对象上鼠标键被按下的情况下,放开鼠标键的时候。如果按下鼠标键的时候,鼠标并不在放开鼠标的对象上,则本事件不会发生。应用于:Button 对象;Link 对象

onreset 事件 发生在表单的“重置”按钮被单击(按下并放开)的时候。通过在事件处理程序中返回 false 值(return false)可以阻止表单重置。应用于:Form 对象

onresize 事件 发生在窗口被调整大小的时候。应用于:window 对象

onsubmit 事件 发生在表单的“提交”按钮被单击(按下并放开)的时候。可以使用该事件来验证表单的有效性。通过在事件处理程序中返回 false 值(return false)可以阻止表单提交。应用于:Form 对象

onunload 事件 发生在用户退出文档(或者关闭窗口,或者到另一个页面去)的时候。与 onload 一样,要写在 HTML 中就写到<body>标记里。

有的 Web Masters 用这个方法来弹出“调查表单”,以“强迫”来者填写;有的就弹出广告窗口,唆使来者点击连接。我觉得这种“onunload="open..."”的方法很不好,有时甚至会因为弹出太多窗口而导致资源缺乏。有什么对来者说就应该在网页上说完,不对吗? 应用于:window 对象

Javascript 相关文章推荐
javascript 对象定义方法 简单易学
Mar 22 Javascript
学习ExtJS fit布局使用说明
Oct 08 Javascript
jquery 提交值不为空的元素示例代码
May 10 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
分享一个自己写的简单的javascript分页组件
Feb 15 Javascript
js获取元素下的第一级子元素的方法(推荐)
Mar 05 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 Javascript
JavaScript中的其他对象
Jan 16 #Javascript
JavaScript中的Document文档对象
Jan 16 #Javascript
JavaScript中的Location地址对象
Jan 16 #Javascript
JavaScript中的History历史对象
Jan 16 #Javascript
JavaScript中的Window窗口对象
Jan 16 #Javascript
JavaScript中的Screen屏幕对象
Jan 16 #Javascript
JavaScipt基本教程之JavaScript语言的基础
Jan 16 #Javascript
You might like
PHP n个不重复的随机数生成代码
2009/06/23 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
Laravel关联模型中过滤结果为空的结果集(has和with区别)
2018/10/18 PHP
Laravel 修改默认日志文件名称和位置的例子
2019/10/17 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
在JavaScript并非所有的一切都是对象
2013/04/11 Javascript
javascript操作html控件实例(javascript添加html)
2013/12/02 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
laydate时间日历插件使用方法详解
2018/11/14 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
解析Python中的二进制位运算符
2015/05/13 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
python中的二维列表实例详解
2018/06/19 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
对pandas将dataframe中某列按照条件赋值的实例讲解
2018/11/29 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
pycharm实现在子类中添加一个父类没有的属性
2020/03/12 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
大学生自我鉴定
2013/12/08 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
应届生求职自荐信范文
2014/04/07 职场文书
综合素质自我评价评语
2015/03/06 职场文书