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 相关文章推荐
常用的javascript function代码
May 23 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
jQuery实现标题有打字效果的焦点图代码
Nov 16 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
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
php目录管理函数小结
2008/09/10 PHP
微信公众平台开发实现2048游戏的方法
2015/04/15 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
关于Vue中axios的封装实例详解
2019/10/20 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python多图片合并PDF的方法
2019/01/03 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
.net软件工程师面试题
2015/03/31 面试题
介绍一下Python中webbrowser的用法
2013/05/07 面试题
学校安全责任书
2014/04/14 职场文书
诚信承诺书模板
2014/05/26 职场文书
生产车间标语
2014/06/11 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
大学生年度个人总结
2015/02/15 职场文书
污染环境建议书
2015/09/14 职场文书
导游词之桂林
2019/08/20 职场文书
PyQt5 QThread倒计时功能的实现代码
2021/04/02 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
MySQL空间数据存储及函数
2021/09/25 MySQL