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设置css属性的代码
Dec 28 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
javascript数组去掉重复
May 12 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
Jan 24 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
May 10 Javascript
jQuery选择器中含有空格的使用示例及注意事项
Aug 25 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
vue.js入门(3)——详解组件通信
Dec 02 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
微信小程序实现聊天室
Aug 21 Javascript
原生JS封装vue Tab切换效果
Apr 28 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
Protoss建筑一览
2020/03/14 星际争霸
配置最新的PHP加MYSQL服务器
2006/10/09 PHP
php通过分类列表产生分类树数组的方法
2015/04/20 PHP
php使用PDO事务配合表格读取大量数据插入操作实现方法
2017/02/16 PHP
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
原生JavaScript编写俄罗斯方块
2015/03/30 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
bootstrap中使用google prettify让代码高亮的方法
2016/10/21 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JavaScript代码模拟鼠标自动点击事件示例
2020/08/07 Javascript
vue 动态添加的路由页面刷新时失效的原因及解决方案
2021/02/26 Vue.js
[42:20]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
Python中的None与 NULL(即空字符)的区别详解
2020/09/24 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
乌克兰珠宝大卖场:Zlato.ua
2020/09/27 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
推荐信格式范文
2014/05/09 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
换届选举主持词
2015/07/03 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
管理者们如何制定2019年的工作计划?
2019/07/01 职场文书
MySQL中几种插入和批量语句实例详解
2021/09/14 MySQL