【原创翻译】深入理解javascript事件处理函数绑定三部曲(二)——传统处理函数绑定模型


原文地址

这一次我要解释最优秀的事件处理函数绑定方式:确保当事件发生在某个html元素上时,能有相应的脚本与之对应

 

在早期运行javascript的浏览器中,处理函数绑定只能通过行内模型。但自从DHTML彻底改变生成网页的方式后,事件绑定模型也得到拓展并且更加灵活。所以浏览器厂商引进了新的事件模型。Netscape是从第三代开始的,而IE在第四代中也同样引进。

 

因为Netscape3已经支持新的绑定模型,所以至少在浏览器大战之前,从某种意义上来说它已经是一种执行的标准,。因此,微软为了使它的浏览器具有兼容性(因为大多数网页都遵循了Netscape的事件模型),最后一次不得不也采用了这种标准。

 

所以两家浏览器,事实上是所有的浏览器,都认可这段代码:

element.onclick = doSomething;

 

作为一种绑定事件函数的正确方式。无论用户什么时候在什么浏览器上点击这个HTML元素,函数,doSomething()都会被执行。因为这种写法是通用,更因为它是跨浏览器绑定事件函数的唯一方式。但有一点非常重要,就是你也要非常明白这种方式的局限性和应该出现的场合。

 

因为当这种模型被引进时没有任何的官方标准可以遵循,所以我把它称为传统事件绑定模型。与此同时W3C已经标准化了事件绑定,并且微软也发明了更先进的模型(参见下一篇),但是传统的模型仍然能良好的工作。

 

更先进的事件绑定

在Netscape3和Explorer4之后,javascript对每一种可以发生在元素上的事件,都作为自己的一种属性。因此HTML元素有onclick,onmouseover,onkeypress属性等。但究竟哪一种html元素有哪一种属性,哪一种html元素支持事件——依据浏览器而定。

 

就这些属性而言,并不是什么很新鲜的东西。在早期的javascript浏览器中已经存在了:

<a href="somewhere.html" onclick="doSomething()">

 

这个A标签有一个onclick属性,也就意味着javascript变成了一种元素的属性。在早期的浏览器中,处理函数用这种写入标签的方式。所以如果你想在页面上的每一个超链接都有同样的处理函数,工作量是非常巨大的。

 

随着传统绑定模型的出现,onclick,onmouseover等所有html元素的事件属性都可以通过javascript访问。在你通过DOM访问html元素后,现在你可以在最小程度的修改html代码的基础上,新增,修改或者移除处理函数。你可以把你的函数写入html的属性中:

element.onclick = doSomething;

 

在我们的例子中,函数doSomething()绑定到onclick属性上,并且无论用户点击这个元素,函数都会被执行。注意事件名称必须小写。

 

要移除处理函数,只要简单的把onclick方法置空

element.onclick = null;

 

处理函数也是一个普通的javascript函数,就算事件没有发生它也能被执行,如果你这么作:

element.onclick()

 

doSomething()将被执行,虽然没有事件真的发生。但是这种执行处理函数的方式使用的并不非常多

 

微软也为自己的IE5.5和之后的IE新增了fireEvent()方法,目的是为了实现上面的效果。

语法应该这么写

element.fireEvent('onclick')

 

没有括号!

请注意在绑定处理函数过程中不能使用括号()。分配给onclick给它的是整个函数。如果你这么做:

element.onclick = doSomething();

函数将会被执行,却是它的结果被绑定在onclick上。这并不是我们想要的,我们希望当事件发生时函数被执行。再者说,通常函数是期望有相应的事件发生,如果在没有上下文的情况下就执行它,会引起错误。

 

this关键字

在javascript中this关键字总是对一个函数“拥有者”的引用。在处理函数的例子中,如果this是代指正在处理事件的html元素,这将会非常有用。你可以很轻松的访问它。

 

不幸的是this关键字虽然非常强大,但是如果你不是非常清楚它的工作原理的话,使用起来也很困难。我在另一篇文章中有谈论。这里我只给出一个简短的结论。

 

在传统绑定模式中的this关键字,同行内绑定模式(上一篇)中的有所不同。在这里this关键字存在于函数中,而不是Html某个属性。具体的不同之处会在另一个页面单独指出

element.onclick = doSomething;

another_element.onclick = doSomething;

function doSomething() {

this.style.backgroundColor = '#cc0000';

}

如果你给任何一个Html元素的click事件绑定一个doSomething()函数,则用户在任何时候点击它时。它的背景都会变为红色。

 

匿名函数

假设你想在改变所有DIV的背景颜色,在onmouseover是改变在onmouseout时恢复,恰当的this应该这么使用:

var x = document.getElementsByTagName('DIV');

for (var i=0;i<x.length;i++) {
x[i].onmouseover = over;
x[i].onmouseout = out;
}

function over() {
this.style.backgroundColor='#cc0000'
}

function out() {
this.style.backgroundColor='#ffffff'
}

代码当然能正常工作,但是over()和out()函数这么简单,把他们绑定为匿名函数更为明智:

...

for (var i=0;i<x.length;i++) {
x[i].onmouseover = function () {this.style.backgroundColor='#cc0000'}

x[i].onmouseout = function () {this.style.backgroundColor='#ffffff'}
}

onmouseover和onmouseoout期望能匹配对应的处理函数,相比复制over()和out()函数而言,我们在事件绑定脚本中立即定义了处理函数。因为他们没有函数名,所以称之为匿名函数。

 

这两种绑定事件处理函数的方法是完全相同的的,唯一的不同之处是第二个用更少的代码。当我需要绑定一个简单的事件处理函数时,我更乐意使用匿名函数。

 

问题

传统模式的一个明显缺陷的就是onclick只能容下一个函数,那么当你想为一个事件绑定多个处理函数时这就变成了一个大问题。

 

举个例子,假设你在写一个功能模块,实现一个元素的拖拽。模块借助于一个onclick处理函数上,当点击这个元素时开始执行拖拽。你同时也在实现另一个模块,能悄悄追踪用户的点击情况,并且在发生onunload事件时,把信息发送给服务器,你就可以发现用户到底是如何使用你的页面的。这个模块,同样借助于onclick处理函数。

 

所以你可以这么做:

element.onclick = startDragDrop;
element.onclick = spyOnUser;

 

但是问题发生了。第二个绑定onclick上的函数会覆盖第一个函数,所以当用户点击某个元素时,只有第二个spyOnUser被执行。解决方案当然是绑定一个能同时执行两个函数的函数

element.onclick = function () {startDragDrop(); spyOnUser()}

 

更灵活的绑定方式

但是假设你不需要在每一个页面都需要这两个功能。现在如果你真的这么做:

element.onclick = function () {startDragDrop(); spyOnUser()}

 

你也许会得到错误的信息,因为这两个函数的其中之一可能还没有定义。当我们想要绑定spyOnUser()时,startDrapDrop()可能还没有绑定,所以我们这么做:

var old = (element.onclick) ? element.onclick : function () {};

element.onclick = function () {old(); spyOnUser()};

首先你要定义一个名为old的变量,如果这个元素有一个onclick事件处理函数,把这个函数存储于old中,如果它没有,把一个空函数放进old中。再给div元素绑定一个新的处理函数,它首先执行的是old,再是spyOnUser()

 

现在新的事件处理函数添加给元素了,并且之前的处理(如果有的话)还能得以保存

 

还有最后一个问题:如果你想移除其中一个处理函数,而不是全部的,应该怎么办?现在我不知道应该如何是好了。你又不得不以另一种方式再次编辑element.onclick事件,但是我并不想真的去研究这个问题

 

其他的模型

现在我们已经见识到传统的事件绑定模型使用起来非常简单,但是也存在一些棘手的问题,比如说当你想给同一个事件添加不止一个处理函数时。所以W3C事件绑定模型很好的解决了这个问题

 

下篇继续谈《先进的绑定模型》

posted @ 2012-02-29 14:04  hh54188  阅读(2912)  评论(2编辑  收藏  举报