开发学院网页设计 JavaScript 传统的JavaScript事件处理函数阅读

传统的JavaScript事件处理函数

　2010-09-14 13:26:41　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺璇茬箲濮樸劑鍩€椤掍礁鍤柛鎾跺枎椤繐煤椤忓嫬鐎銈嗘礀閹冲酣宕滄导瀛樷拺闂侇偆鍋涢懟顖涙櫠椤斿墽纾煎璺猴功缁夎櫣鈧鍠栭…閿嬩繆濮濆矈妲烽梺绋款儐閹瑰洤螞閸愩劉妲堟繛鍡楃箲濞堟﹢姊绘担椋庝覆缂傚秮鍋撴繛瀛樼矤閸撶喖宕洪埀顒併亜閹烘垵鈧綊寮抽鍕厱閻庯綆浜烽煬顒傗偓瑙勬磻閸楀啿顕ｉ崐鐕佹Ь闂佸搫妫寸粻鎾诲蓟閵娾晜鍋嗛柛灞剧☉椤忥拷

核心提示：Web浏览器中的JavaScript实现允许我们定义响应用户事件(通常是鼠标或者键盘事件)所执行的代码，在支持Ajax的现代浏览器中，传统的JavaScript事件处理函数，这些事件处理函数可以被设置到大多数可视元素之上，我们可以使用事件处理函数将可视用户界面(即视图)与业务对象模型相连接，我们开始感觉到了更多的限制，

Web浏览器中的JavaScript实现允许我们定义响应用户事件(通常是鼠标或者键盘事件)所执行的代码。在支持Ajax的现代浏览器中，这些事件处理函数可以被设置到大多数可视元素之上。我们可以使用事件处理函数将可视用户界面(即视图)与业务对象模型相连接。

传统的事件模型在JavaScript诞生的早期就存在了，它是相当简单和直接的。DOM元素有几个预先定义的属性，可以赋值为回调函数。例如，为了附加一个在鼠标点击元素myDomElement时被调用的函数，我们可以这样写：

　　myDomElement.onclick=showAnimatedMonkey

　　myDomElement是可以通过程序处理的任何DOM元素。showAnimatedMonkey是一个函数，定义为：

　　function showAnimatedMonkey(){
　　　　//some skillfully executed code to display
　　　　//an engaging cartoon character here
　　}

这只是一个普通的JavaScript函数。注意，当我们分配事件处理函数的时候，传递的是一个Function对象，而不是对那个对象的调用，因此它在函数名后面不包含圆括号。下面是一个常见的错误：

　　myDomElement.onclick=showAnimatedMonkey();

这对于不习惯将函数看作正常对象的程序员来说更加自然一些，但是它不会按照我们所设想的方式工作。函数将在进行赋值时被调用，而不是当点击DOM元素时才被调用。onclick属性将被设置为函数返回的任何值。除非你编写一些非常巧妙的包含函数(involving function)，可以返回对其他函数的引用，否则产生的效果可能不是你所希望的。正确的方法是：

　　myDomElement.onclick=showAnimatedMonkey;

这里向DOM元素传递了一个回调函数的引用，告诉它这是当点击节点时需要调用的函数。DOM元素有很多此类的属性，事件处理函数可以附加在这些属性上。用于GUI的常用事件处理回调函数列举在表4-1中。类似的属性也可以在Web浏览器JavaScript的其他地方见到。我们已经遇到的XMLHttpRequest.onreadystate和window.onload也是由程序员赋值的事件处理函数。

表4-1　DOM中的常用GUI事件处理函数属性

属　　性	描　　述
onmouseover	当鼠标首次进入元素区域的时候触发
onmouseout	当鼠标离开元素区域的时候触发
onmousemove	任何时候，当鼠标在元素区域中移动的时候触发（即频繁地触发）
onclick	当鼠标在元素区域内被点击的时候触发
onkeypress	当按下键，且该元素有输入焦点时触发。全局键处理器可以附加在文档主体上
onfocus	可视元素获得了输入焦点
onblur	可视元素丧失了输入焦点

事件处理函数有一个不寻常的特征需要在这里提一下，当编写面向对象的JavaScript时，它最容易让人出错，这也是在开发Ajax客户端时要严重依赖的特征。

我们已经得到了一个DOM元素的句柄，分配了一个回调函数给onclick属性。当DOM元素收到鼠标点击事件时，回调即被调用。然而，函数上下文(即变量this所确定的值——参见附录B，可获得关于JavaScript Function对象的完整讨论)赋值为收到事件的DOM节点。根据函数最初是在什么地方声明以及如何声明的，情况会有所不同，这可能会把人搞糊涂。

让我们通过一个例子来研究这个问题。我们定义了一个表示按钮对象的类，它有一个到DOM节点的引用、一个回调处理函数，以及当点击按钮时显示出的一个值。当鼠标点击事件发生时，按钮的任何实例都将以同样的方式响应，因此我们定义回调处理函数作为按钮类的一个方法。这些说明对于初学者已经足够了，下面让我们看看代码。这里是按钮类的构造函数。

function Button(value,domEl){ 　　　　this.domEl=domEl; 　　　　this.value=value; 　　　　this.domEl.onclick=this.clickHandler; 　　}

继续定义一个事件处理函数作为Button类的一部分。

　　Button.prototype.clickHandler=function(){ 　　　　alert(this.value); 　　}

这段代码看起来很直观，但是它并没有做我们希望它做的事情。警告框通常会返回消息unde- fined，而不是传递到构造函数的value属性。为什么呢?当点击DOM元素时，函数click- Handler由浏览器调用，它设置函数上下文到DOM元素，而不是Button的JavaScript对象。于是，this.value指向DOM元素的value属性，而不是Button对象的value属性。你永远也不可能通过查看事件处理函数的声明来发现这个情况，是不是?

我们可以通过向DOM元素传递Button对象的引用来解决这个问题，也就是，按下面的方法修改构造函数：

　　function Button(value,domEl){
　　　　this.domEl=domEl;
　　　　this.value=value;
　　　　this.domEl.buttonObj=this;
　　　　this.domEl.onclick=this.clickHandler;
　　}

DOM元素仍然没有value属性，但是它有一个到Button对象的引用，可以从那里得到value。通过对事件处理函数做如下修改，我们的工作就完成了：

　　Button.prototype.clickHandler=function(){
　　　　var buttonObj=this.buttonObj;
　　　　var value=(buttonObj && buttonObj.value) ?
　　　　buttonObj.value : "unknown value";
　　　　alert(value);
　　}

DOM节点引用Button对象，Button对象引用它的value属性，这样事件处理函数就做了我们希望它做的事情。我们可以直接给DOM节点附加value，不过附加一个指向整个后端对象的引用可以使这种模式容易地用于任意复杂的对象，顺便说一句，我们在这里已经实现了一个小的MVC模式，其中DOM元素作为后端对象模型的前端视图。

以上讨论的就是传统的事件模型。这种事件模型主要的缺点是每个元素只允许有一个事件处理函数。在第3章介绍的Observer模式中，我们注意到一个可观察的元素在给定时间可以有任意多个观察者附加在上面。当为Web页面编写简单的脚本时，这可能不会成为一个严重的缺点，但是当迈向更加复杂的Ajax客户端的时候，我们开始感觉到了更多的限制。我们将在4.3.3节中更为密切地考察这个问题，现在来看看新近出现的事件模型。