javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Event 早期的事件处理

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

作者：

在这一章我会谈到一些最古老的添加事件处理程序的方法，这些方法甚至被第二代浏览器所支持。

这些古老的浏览器只支持一种注册事件处理程序的方法，这个方法是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里面。现在你可以读取这个链接的链接地址然后进行确认。你可以把这个技巧运用在任何一个链接上：他总是会显示你刚才点击的那个链接的真实地址。
继续
如果需要继续学习，请看下一章。

您可能感兴趣的文章:
阅读全文