JavaScript入门教程(11) js事件处理


Posted in Javascript onJanuary 31, 2009

事件处理概述

事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性。事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应。其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去。事件的处理程序可以是任意 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回调函数
Dec 28 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 #Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 #Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 #Javascript
JavaScript入门教程(7) History历史对象
Jan 31 #Javascript
JavaScript入门教程(6) Window窗口对象
Jan 31 #Javascript
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 #Javascript
JavaScript入门教程(3) js面向对象
Jan 31 #Javascript
You might like
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
PHPWind 发帖回帖Api PHP版打包下载
2010/02/08 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
innerHTML,outerHTML,innerTEXT三者之间的区别
2007/01/28 Javascript
js获取当前select 元素值的代码
2010/04/19 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
window.onload使用指南
2015/09/13 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
2016/03/22 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
了解JavaScript中的选择器
2019/05/24 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
解决pandas中读取中文名称的csv文件报错的问题
2018/07/04 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
Django之PopUp的具体实现方法
2019/08/31 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
护士实习鉴定范文
2013/12/22 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
入党积极分子半年考察意见
2015/06/02 职场文书
院系推荐意见
2015/06/05 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript