[译]JavaScript事件(四)早期的事件处理程序

早期的事件处理程序

本页解释最古老的添加事件处理程序的方法。甚至连第二代浏览器都支持

最早期的浏览器只支持一种注册事件处理程序的方法。这种方法是Netscape 发明的,到目前为止都没有兼容性问题。Netscape 获得了主导权,微软想生产一款支持JavaScript的浏览器就必须遵从他的领导。因此这种注册模式在所有浏览器都能工作,除了IE3 on Mac,这个版本根本不支持事件。

注册事件处理程序

内联注册模式中,事件处理程序(event handlers)像属性一样添加在HTML元素上。像这样:

<A HREF="somewhere.html" onClick="alert('I\'ve been clicked!')">

当点击事件发生在链接上的时候,event handler被调用,并执行脚本:弹出警告框。你也可以调用JavaScript函数:

<A HREF="somewhere.html" onClick="doSomething()">

大小写混合的写法 (onClick, onMouseOver)只是个传统。 HTML 是忽略大小写的,所以你可以用你喜欢的任何写法。但是在XHTML中,属性都是小写,所以如果你用XHTML,就必须写成 onclick 和onmouseover。

不要使用它

虽然这种注册方法很古老,也很可靠。但它有一个明显的缺点,它要求你在XHTML结构中写JavaScript代码。它们本不应该在那儿的。

因此我强烈建议不要使用这种方式。参考我写的行为与结构分离的理由。

理解这种古老的模式对全面的理解JavaScript event handling很有用。但是你应该使用用更现代的方法,稍后介绍。

默认行为

当时,Netscape也定义了默认行为和怎样阻止默认行为。这种模式经历了浏览器战争和标准化并且幸存了下来,所以今天还可以很好的使用。

我们都知道,当用户点击一个链接,浏览器加载链接href属性指定的页面。这就是点击链接的默认行为。当你在链接上定义一个onclick事件处理程序时,会发生什么情况?它会被执行,但何时执行?

<A HREF="somewhere.html" onClick="doSomething()">

在这个例子中,点击链接,事件处理程序(event handler)必须先执行,然后默认行为执行。因为,当默认行为(加载新页面)执行时,旧的页面,包括event handler都会从浏览器内存中移除。所以event handler要执行,只能在默认动作执行。

这成为event handler的一项重要的原则,如果一个事件同时有event handler和默认行为:

  1. 事件处理程序(event handler)先执行
  2. 默认行为之后执行

作以我们的例子中,doSomething() 先执行,只有此时,浏览器才会打开链接。

阻止默认行为

当这些确定后,人们就开始想阻止默认行为。在我们的例子中,应该有方法阻止浏览器加载新页面。

因此event handler可以返回(return)一个布尔值(true or false),false意味着:“不执行默认行为”,所以我们把例子改成

<A HREF="somewhere.html" onClick="doSomething(); return false">

链接永远不会被打开。我们的函数执行,然后event handler返回false,告诉浏览器不要执行默认行为。

也可以让函数决定要不要执行默认,我们可以把例子改成

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

这就是(非常简单的)用户交互。问用户一个问题,如果回答‘OK’,返回true,如果用户‘取消’,函数返回false。这个返回参数会被event handler接受,返回到事件本身。如果是false 就取消默认行为——链接不会打开。

然而,你不能取消所有的默认行为,比如 unload,想想一下,用户关闭了浏览器窗口,引发了unload 事件,如果你能阻止unload事件,那不是意味着你可以不顾用户的感受永远保持窗口打开吗?那可不行。

你可以试试用微软的beforeunload 事件阻止网页关闭。但是即使询问用户确认阻止默认行为,依然会让人迷惑,最好别用它。 

返回false阻止默认行为,在所有的浏览器都能使用,这是event handler的基本部分,现代的浏览器的event handling添加了一些新的方法阻止默认行为:

  • W3C 添加了 preventDefault() 方法阻止默认行为。调用它默认行为就会被终止。
  • 微软给事件(event)添加了 returnValue 属性,设置它为false默认行为会被终止。

这些你都不怎么需要,只要简单的 return false 就行了。

window.status

 return false 规则有一个例外情况。当你在鼠标滑过(mouseovered)链接时改变窗口状态栏的文字,又想阻止默认行为(在状态栏显示链接的href)时,你必须返回true:

<A HREF="somewhere.html"
onMouseOver="window.status = 'This link goes somewhere'; return true">

如果你不这样做,你的代码就不会起作用。没人知道为什么这是个列外,这只是很多奇怪的事情中的一个。

this

在 JavaScript 中 this 关键字总是指向函数的“拥有者”,在event handler中 this 指向引发 event handler 的 HTML 元素,用来方便的访问它。

不行的是,虽然 this 关键字很强大,但如果你不清楚他是怎样工作的,它会很难用。我在另外的页面讨论怎样用。本页只给出在内联模式(inline model)下简单的用法。

在内联模式下你可以把 this 传递给event handler 函数,如果你这样

<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,现在你可以读出href属性用到

confirm中。你可以把这个event handler用到文档中的任何一个链接上,它会将用户点击的链接显示出来。

继续

如果你想顺序的读完本系列文章,你可以继续阅读传统的注册事件模式。

 

 全文目录:http://www.cnblogs.com/Kamal/articles/javascript_events_contents.html

原文链接:http://www.quirksmode.org/js/events_early.html

posted on 2009-12-10 15:56  PlayerYK  阅读(388)  评论(1编辑  收藏  举报

导航