JavaScript Event学习第三章 早期的事件处理程序


Posted in Javascript onFebruary 07, 2010

这些古老的浏览器只支持一种注册事件处理程序的方法,这个方法是Netscape发明的。因为Netscape先发制人,所以如果微软也想做支持JavaScript事件的浏览器就得跟着Netscape走,所以这里没有兼容性的问题。所以这种模式在任何支持JavaScript的浏览器都能运行---除了Mac上的IE3,他根本就不支持事件。
注册事件处理程序
在内联式的事件注册模型中,事件处理程序就像是一个HTML元素的属性,比如:
<A HREF="somewhere.html" onClick="alert('I\'ve been clicked!')">
当这个链接上发生单击事件的时候,事件处理程序就被触发然后执行你的脚本:一个警告对话框弹出。你也可以触发一个JavaScript函数:
<A HREF="somewhere.html" onClick="doSomething()">
上面两个例子里面事件的名字的大小写只是一个习惯问题,HTML是大小写不敏感的,所以你想怎么写都可以。XHTML要求所有的属性名称必须都是小写,所以如果你使用的XHTML那么名字就要写成onclick。
不要用他
虽然这种内联型的注册模型很古老也很可靠,但是他有一个不足。他要求你在XHTML结构层里面写上本不属于这里的JavaScript代码。
所以我强烈建议你不要使用这种方法。在这里我有详细的解释。
理解这些旧的模型对于JavaScript事件处理的全局感有很大帮助,但是你最好还是使用我后面说明的现代模式。
默认动作
当年Netscape设置了默认动作也有怎样防止默认动作运行。他的模式拯救了浏览器大战和标准的制定,而且到如今都很好的运行着。
众所周知,当用户点击了一个链接浏览器就会按照href的属性加载页面。这是链接上的默认动作。但是当你定义了一个onclick事件处理程序了以后会发生什么呢?应该能被执行,但是什么时候呢?
<A HREF="somewhere.html" onClick="doSomething()">
如果在这个链接上单击,那么事件处理程序一定会被首先执行。毕竟当默认动作发生--新页面加载--旧的页面包括事件处理程序本身都会从内存中清除。如果onclick的事件处理程序执行了,那么一定是在默认动作之前。
这就有了一个非常重要的原理。如果一个事件同时触发了默认动作和事件处理程序,那么:
、事件处理程序会首先执行
、默认动作随后执行
所以在上面的例子中,doSomething()会首先执行,然后浏览器会打开链接。
阻止默认事件
当这些都确定之后,大家大多开始考虑如何阻止默认事件。在我们的例子中就可以阻止浏览器打开新的页面。
所以事件处理程序可以返回一个布尔值(ture或者false),false的含义就是“不要进行默认动作”。这样我们就可以把例子改成:
<A HREF="somewhere.html" onClick="doSomething(); return false">
这个链接就不会跟着执行了。这个函数执行之后程序返回false,告诉浏览器不要执行默认动作。
有时候有必要让函数决定什么时候该执行什么时候不该执行默认动作。所以我们可以把例子改成:

<A HREF="somewhere.html" onClick="return doSomething()"> 
function doSomething() 
{ 
return confirm('Do you really want to follow this link?') 
}

这就是(非常简单的)用户交互。用户会被问一个问题,如果回答是肯定的那么函数返回true,如果取消了那么久返回一个false。这个返回值会被事件处理程序捕获,然后转给事件本身。如果是flase那么默认动作就不会被执行--链接不会进入。
然而,不是所有的默认动作都能被阻止。比如unload事件就不行。假设用户关闭浏览器窗口--触发了unload事件。如果你能阻止关闭窗口,那么窗口会违背用户的意愿而一直打开着么?当然不会。
你可以试试微软的beforeunload属性来阻止unload。与其制造一个非常混乱的情况让用户来选择确认这个行为。那不如不用。
返回false来阻止默认动作是所有浏览器都支持的这是事件处理程序的基本组成。如今的事件处理程序模型还添加了一些新的方法来阻止默认动作:
W3C给事件添加了preventDefalut()方法。如果你引用了这个方法那么默认动作就会被阻止。
微软给事件添加了returnValue属性。如果你设置他的值为false那么默认动作也会被阻止。
但是用不着这些个,简单的返回false就够了。
window.status
这里对于返回false有一个例外。当你设置鼠标经过链接的时候改变窗口的状态栏以后,你还想阻止默认动作--在状态栏显示链接地址--的时候,你就应该返回true:
<A HREF="somewhere.html" 
onMouseOver="window.status = 'This link goes somewhere'; return true">

如果你不这样做,那么代码就不会工作。没人知道那是怎么回事,就是一个比较怪异的事情。
this
在JavaScript里this关键字通常指函数的所有者。如果this指向事件发生的HTML元素,那么一切都是那么的美好,你可以很简单的做很多事情。
不幸的是,虽然this非常的强大,但是如果你不是明确的知道他怎么运作的话使用起来还是比较难的。关于这个我在另一个地方有详细的讨论,在这我在内联模式下做一些概述。
在内联模式下你可以将this作为一个事件处理程序函数的一个参数。所以你可以:
<A HREF="somewhere.html" onClick="doSomething(this)"> 
function doSomething(obj) 
{ 
// obj now refers to the link 
}

你给函数传递了一个引用,存储在obj里面。现在你不需要在遍历文档寻找是哪个元素被点击了:他很安全的存储在变量obj里面。现在你就可以:
<A HREF="somewhere.html" onClick="return doSomething(this)"> 
<A HREF="somewhereElse.html" onClick="return doSomething(this)"> 
function doSomething(obj) 
{ 
var linkTo = obj.href; 
return confirm('Do you really want to follow the link to ' + linkTo + '?') 
}

函数接受到一个链接的引用存储在obj里面。现在你可以读取这个链接的链接地址然后进行确认。你可以把这个技巧运用在任何一个链接上:他总是会显示你刚才点击的那个链接的真实地址。
继续
如果需要继续学习,请看下一章。
Javascript 相关文章推荐
jquery animate 动画效果使用说明
Nov 04 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
Aug 13 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
页面内容排序插件jSort使用方法
Oct 10 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
JavaScript Event学习第二章 Event浏览器兼容性
Feb 07 #Javascript
JavaScript Event事件学习第一章 Event介绍
Feb 07 #Javascript
jQuery库与其他JS库冲突的解决办法
Feb 07 #Javascript
jQuery学习7 操作JavaScript对象和集合的函数
Feb 07 #Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 #Javascript
jQuery学习5 jQuery事件模型
Feb 07 #Javascript
jQuery学习4 浏览器的事件模型
Feb 07 #Javascript
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
php 正则 过滤html 的超链接
2009/06/02 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
php使用ftp远程上传文件类(完美解决主从文件同步问题的方法)
2016/09/23 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
jquery中push()的用法(数组添加元素)
2014/11/25 Javascript
jQuery插件jPaginate实现无刷新分页
2015/05/04 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
JS实现鼠标移上去显示图片或微信二维码
2016/12/14 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
Python实现保证只能运行一个脚本实例
2015/06/24 Python
Android模拟器无法启动,报错:Cannot set up guest memory ‘android_arm’ Invalid argument的解决方法
2016/07/01 Python
Django中cookie的基本使用方法示例
2018/02/03 Python
python多线程分块读取文件
2019/08/29 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
Python脚本操作Excel实现批量替换功能
2019/11/20 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
推荐技术人员一款Python开源库(造数据神器)
2020/07/08 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
2020/06/11 HTML / CSS
法国房车租赁网站:Yescapa
2019/08/26 全球购物
医学专业大学生求职的自我评价
2013/11/27 职场文书
关于爱情的广播稿
2014/01/16 职场文书
大学总结自我鉴定
2014/01/18 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书