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 相关文章推荐
js获取input标签的输入值实现代码
Aug 05 Javascript
给js文件传参数(详解)
Jul 13 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
Feb 25 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
Mar 13 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
基于Bootstrap下拉框插件bootstrap-select使用方法详解
Aug 07 Javascript
详解vue 不同环境配置不同的打包命令
Apr 07 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
Sep 02 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 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中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
php数组生成html下拉列表的方法
2015/07/20 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
iframe子页面获取父页面元素的方法
2013/11/05 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
原生js和jQuery写的网页选项卡特效对比
2015/04/27 Javascript
jQuery layui常用方法介绍
2016/07/25 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
FitFlop美国官网:英国符合人体工学的鞋类品牌
2018/10/05 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
市场推广策划方案
2014/06/02 职场文书
应聘护士求职信
2014/07/21 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
党支部四风整改方案
2014/10/25 职场文书
2015年党员发展工作总结
2015/05/13 职场文书