事件设计概述
事件机制可以使程序逻辑更加符合现实世界，在JavaScript中很多对象都有自己的事件，例如按钮就有onclick事件，下拉列表框就有onchange事件，通过这些事件可以方便编程。那么对于自己定义的类，是否也可以实现事件机制呢？是的，通过事件机制，可以将类设计为独立的模块，通过事件对外通信，提高了程序的开发效率。本节就将详细介绍JavaScript中的事件设计模式以及可能遇到的问题。
最简单的事件设计模式
最简单的一种模式是将一个类的方法成员定义为事件，这不需要任何特殊的语法，通常是一个空方法，例如：
function class1(){
//构造函数
}
class1.prototype={
show:function(){
//show函数的实现
this.onShow(); //触发onShow事件
},
onShow:function(){} //定义事件接口
}
上面的代码中，就定义了一个方法：show()，同时该方法中调用了onShow()方法，这个onShow()方法就是对外提供的事件接口，其用法如下：
//创建class1的实例
var obj=new class1();
//创建obj的onShow事件处理程序
obj.onShow=function(){
alert("onshow event");
}
//调用obj的show方法
obj.show();
由此可见，obj.onShow方法在类的外部被定义，而在类的内部方法show()中被调用，这就实现了事件机制。
上述方法很简单，实际的开发中常用来解决一些简单的事件功能。说它简单，因为它有以下两个缺点：
? 不能够给事件处理程序传递参数，因为是在show()这个内部方法中调用事件处理程序的，无法知道外部的参数；
? 每个事件接口仅能够绑定一个事件处理程序，而内部方法则可以使用attachEvent或者addEventListener方法绑定多个处理程序。
在下面两小节将着重解决这个问题。
给事件处理程序传递参数
给事件处理程序传递参数不仅是自定义事件中存在的问题，也是系统内部对象的事件机制中存在的问题，因为事件机制仅传递一个函数的名称，不带有任何参数的信息，所以无法传递参数进去。例如：
//定义类class1
function class1(){
//构造函数
}
class1.prototype={
show:function(){
//show函数的实现
this.onShow(); //触发onShow事件
},
onShow:function(){} //定义事件接口
}
//创建class1的实例
var obj=new class1();
//创建obj的onShow事件处理程序
function objOnShow(userName){
alert("hello,"+userName);
}
//定义变量userName
var userName="jack";
//绑定obj的onShow事件
obj.onShow=objOnShow; //无法将userName这个变量传递进去
//调用obj的show方法
obj.show();
注意上面的obj.onShow=objOnShow事件绑定语句，不能为了传递userName变量进去而写成：
obj.onShow=objOnShow(userName);
或者：
obj.onShow="objOnShow(userName)";
前者是将objOnShow(userName)的运行结果赋给了obj.onShow，而后者是将字符串“objOnShow(userName)”赋给了obj.onShow。
要解决这个问题，可以从相反的思路去考虑，不考虑怎么把参数传进去，而是考虑如何构建一个无需参数的事件处理程序，该程序是根据有参数的事件处理程序创建的，是一个外层的封装。现在自定义一个通用的函数来实现这种功能：
//将有参数的函数封装为无参数的函数
function createFunction(obj,strFunc){
var args=[]; //定义args用于存储传递给事件处理程序的参数
if(!obj)obj=window; //如果是全局函数则obj=window;
//得到传递给事件处理程序的参数
for(var i=2;i<arguments.length;i++)args.push(arguments[i]);
//用无参数函数封装事件处理程序的调用
return function(){
obj[strFunc].apply(obj,args); //将参数传递给指定的事件处理程序
}
}
该方法将一个有参数的函数封装为一个无参数的函数，不仅对全局函数适用，作为对象方法存在的函数同样适用。该方法首先接收两个参数：obj和strFunc，obj表示事件处理程序所在的对象；strFunc表示事件处理程序的名称。除此以外，程序中还利用arguments对象处理第二个参数以后的隐式参数，即未定义形参的参数，并在调用事件处理程序时将这些参数传递进去。例如一个事件处理程序是：
someObject.eventHandler=function(_arg1,_arg2){
//事件处理代码
}
应该调用：
createFunction(someObject,"eventHandler",arg1,arg2);
这就返回一个无参数的函数，在返回的函数中已经包括了传递进去的参数。如果是全局函数作为事件处理程序，事实上它是window对象的一个方法，所以可以传递window对象作为obj参数，为了更清晰一点，也可以指定obj为null，createFunction函数内部会自动认为该函数是全局函数，从而自动把obj赋值为window。下面来看应用的例子：
<script language="JavaScript" type="text/javascript">
<!--
//将有参数的函数封装为无参数的函数
function createFunction(obj,strFunc){
var args=[];
if(!obj)obj=window;
for(var i=2;i<arguments.length;i++)args.push(arguments[i]);
return function(){
obj[strFunc].apply(obj,args);
}
}
//定义类class1
function class1(){
//构造函数
}
class1.prototype={
show:function(){
//show函数的实现
this.onShow(); //触发onShow事件
},
onShow:function(){} //定义事件接口
}
//创建class1的实例
var obj=new class1();
//创建obj的onShow事件处理程序
function objOnShow(userName){
alert("hello,"+userName);
}
//定义变量userName
var userName="jack";
//绑定obj的onShow事件
obj.onShow=createFunction(null,"objOnShow",userName);
//调用obj的show方法
obj.show();
//-->
</script>
在这段代码中，就将变量userName作为参数传递给了objOnShow事件处理程序。事实上，obj.onShow得到的事件处理程序并不是objOnShow，而是由createFunction返回的一个无参函数。
通过createFunction封装，就可以用一种通用的方案实现参数传递了。这不仅适用于自定义的事件，也适用于系统提供的事件，其原理是完全相同的。
使自定义事件支持多绑定
可以用attachEvent或者addEventListener方法来实现多个事件处理程序的同时绑定，不会互相冲突，而自定义事件怎样来实现多订阅呢？下面介绍这种实现。要实现多订阅，必定需要一个机制用于存储绑定的多个事件处理程序，在事件发生时同时调用这些事件处理程序。从而达到多订阅的效果，其实现如下：
<script language="JavaScript" type="text/javascript">
<!--
//定义类class1
function class1(){
//构造函数
}
//定义类成员
class1.prototype={
show:function(){
//show的代码
//...
//如果有事件绑定则循环onshow数组，触发该事件
if(this.onshow){
for(var i=0;i<this.onshow.length;i++){
this.onshow[i](); //调用事件处理程序
}
}
},
attachOnShow:function(_eHandler){
if(!this.onshow)this.onshow=[]; //用数组存储绑定的事件处理程序引用
this.onshow.push(_eHandler);
}
}
var obj=new class1();
//事件处理程序1
function onShow1(){
alert(1);
}
//事件处理程序2
function onShow2(){
alert(2);
}
//绑定两个事件处理程序
obj.attachOnShow(onShow1);
obj.attachOnShow(onShow2);
//调用show，触发onshow事件
obj.show();
//-->
</script>
从代码的执行结果可以看到，绑定的两个事件处理程序都得到了正确的运行。如果要绑定有参数的事件处理程序，只需加上createFunction方法即可，在上一节有过描述。
这种机制基本上说明了处理多事件处理程序的基本思想，但还有改进的余地。例如如果类有多个事件，可以定义一个类似于attachEvent的方法，用于统一处理事件绑定。在添加了事件绑定后如果想删除，还可以定义一个detachEvent方法用于取消绑定。这些实现的基本思想都是对数组的操作。
=======================================================================================================================
DHTML提供了3种事件的使用方式，它们分别是：
1、Inline HTML: <ELEMENT onXXX='handler'></ELEMENT>
这是最简单最常用的事件绑定方式，不过这里onXXX的值为handler是不太确切的说法。其实这个handler的位置可以放置任何合法的JavaScript语句，因为IE在生成DHMTL树时会为当前Element构建一个'匿名'成员方法，onXXX指向这个方法的handler。比如我们写下，<element id='elmt' onXXX='var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i;'></element>，实际上在DHMTL树种存在如下代码结构：
function anonymous() { var abc =0; for ( var i=0 ; i < 100 ; i++ ) abc+=i; }
此时anonymous方法中的this就是elmt对象。
2、Event property: object.onXXX = handler
这个使用方法是把函数名(handler)赋予element预定义的事件属性上(onXXX)。这里需要注意两个问题：
一是，我们在使用object.onXXX = handler是需要保证object已经在页面中生成。比如我们为document.body赋予事件处理函数，我们必须保证document.body已经存在，就是说我们不能在<body>之前在的全局语句中使用document.body；
二是，handler必须是函数名，和使用方法1中的handler可以是任何JavaScript语句不同！我们最容易出错的使用是，当我们习惯了在inline html中使用<element id='elmt' onXXX = 'return false'></element>后，如果这样使用elmt.onXXX='return false;'。那么就歇菜了，不会有任何执行效果，当然IE也不报错。正确的使用是：
elmt.onXXX = function() { return false; }
3、Named Script: <SCRIPT FOR = object EVENT = onclick>
IE独家支持，没有怎么使用过，不觉得有什么特别的地方哈。如果您知道它的妙处愿闻其详。
DOM提供了两种事件处理使用，它们分别是：
1、attachEvent method:
使用方法：bSuccess = object.attachEvent(sEvent, fpNotify)。解释就抄msdn了
Parameters
sEvent Required. String that specifies any of the standard DHTML Events.
fpNotify Required. Pointer that specifies the function to call when sEvent fires.
Return Value
Boolean. Returns one of the following possible values: true The function was bound successfully to the event.
false The function was not bound to the event.
DOM提供的这个事件附加方式实际上是一个集合操作，我们可以多次的向同一个事件签名上attach多个事件处理函数，比如：
window.attachEvent('onload', handler1); window.attachEvent('onload', handler2); window.attachEvent('onload', handler3); window.attachEvent('onload', handlerN);
将会执行这个N个handler，但是不保证执行顺序。这里有个例外，attachEvent在document.body上attach事件'onload'没有效果，但是attch window对象的'onload'是正确的。根据页面初始化顺序来看，及document.body.attachEvent('onload', handler)返回true来看，这因该是IE的一个bug。
注意DHTML的Event Property方式和DOM的attachEvent方式的区别：
Event Property方式，当触发事件时，事件处理函数是一个无参数函数，我们只能通过event这个window的属性来读取和事件相关的信息。attachEvent方式，当事件处理函数被触发时，该函数的第一个参数arguments[0]，默认是该窗口上的event。什么意思呢？不明白参看这里。
为了减少JavaScript对象的下载次数，Tasian只会在浏览器第一次请求应用时才会下载JavaScript文件。JavaScript对象只会驻留在Top级窗体，任何其它窗体需要引用到该JavaScript对象，只需要在引如下的方式进行引用就行：
需要引用的窗体Button = top.Button //参阅MscrRouter.js
而Button真正定义的JavaScript文件处于Top窗体，为了保证定义的对象格式能跨浏览器有效，Tasian使用了如下的格式进行对象定义:
//定义对象名
function MscrButton()
{
};
//定义对象的方法
MscrButton.onClick = function(strWin, strName)
{
MscrSystem.setAction(strWin, strName, "click", "");
};
请注意，在每个函数后面都有一个分号，这一点对于Tasian非常的重要。因为Tasian中所使用的JavaScript文件都是经过压缩的，并且将全局的JavaScript对象定义合成在一个JavaScript文件中。它的好处是减少网络流量、减少JavaScript对象对客户端资源的占用及减少对服务器请求的发送。
2. 遮罩运用
遮罩是指在一个对象上放置一个新的对象，新对象便是遮罩层。它能截获所有被遮罩对象的事件。
Tasian 所有的窗体都是在一个Iframe, 对于窗体拖动，在IE中能容易地进行事件捕捉处理，可以在非IE的浏览器中，当Mouse移到Iframe时，该 Iframe将会最先处理该事件，使得对Iframe的拖动无效。所以Tasian会在Iframe上加上一个可以关开的遮罩层DIV元素，当要进行窗体对象拖动时，该层会打开，当拖动完成后，该层会关闭。
3. 模态窗体Tasian有一个特殊的窗体，只有当它关闭时才能操作其它窗体内容。该窗体叫模态窗体。在JavaScript实现模拟窗体时，也是使用了一个DIV层，使得它始终于模态窗体的下一级，这样它就能截获所有对它父窗体的操作事件。
4. 动态事件绑定
在IE在动态事件绑定是通过attachEvent实现的，而在Mozilla系列是使用addEventListener。以下是代码摘自document.js两者的使用方法
if (top.isIE)
{
oDB.setCapture();
oDB.attachEvent("onmousemove", __resizingMe);
oDB.attachEvent("onmouseup", __endResizeMe);
}
else
{
document.captureEvents(Event.MOUSEEVENT | Event.MOUSEUP);
document.addEventListener("mousemove", __resizingMe, false);
document.addEventListener("mouseup", __endResizeMe, false);
}
….
if (top.isIE)
{
oDB.detachEvent("onmousemove", __resizingMe);
oDB.detachEvent("onmouseup", __endResizeMe);
oDB.releaseCapture();
}
else
{
document.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
document.removeEventListener("mousemove", __resizingMe, false);
document.removeEventListener("mouseup", __endResizeMe, false);
}
5. Style对象
对于IE中HTML元素的Style对象其强大之处大家都了解，可是对于Mozilla中HTML的Style对象由于其相关介绍实在太少，所以大家都对它很陌生。其实Mozilla中的Style仍然很强大，IE能完成的功能，它大都能完成，只不过大家不了解罢了。比如IE中有filter属性用来设置渐近色，而Mozilla中可以用alpha实现。
以下代码摘自MscrSystem.js
if (!isIE)
{
oEnMsk.style.filter = "alpha(opacity = 35)";
oEnMsk.style.MozOpacity = 0.35;
}
else
{
var strHTML = "
strHTML += ">";
oObj.parentNode.insertAdjacentHTML("BeforeEnd", strHTML);
}
当然Mozilla的Style属性远不止如此，它还可以设置DIV的外观：圆形、郁圆形等。
在IE下，事件为onclick，绑定时为obj.attachEvent("eventName", functionName, useCapture);在此例中eventName为click，functionName为要调用的事件处理方法，比如a()。useCapture表示事件处理模式是否使用捕获模式，即从外向内的模式。那么整条语句应为obj.attachEvent("onclick", a, false);
在firefox下，事件为click，绑定时为obj.addEventListener("eventName", functionName, useCapture);相应的语句为obj.addEventListener("click", functionName, useCapture);
在应用时，为了兼容性，可以使用以下判断来绑定事件：
if (window.attachEvent)
{//window下的事件绑定}
else{//firefox下的事件绑定}
今天暂时抛开prototype1.3.1，分享一下我的javscript事件设计心得。其实现的技术基础在于函数的本质，这在前面两篇中有详细叙述。
javascript内置的对象都有事件功能，比如button就有onclick事件，input就有onchange事件。那么如何在我们自定义的类中实现事件呢？很简单：
myClass.prototype={
show:function(){
//statement
onshow();
},
onshow:function(){}
}
这段代码其实就是实现了onshow事件，在myClass实例show的时候触发，你可以给onshow绑定一个函数，从而使用事件功能。在javascript中，内置的对象事件使用方法都是如此，其内部实现应该也是基于这样的模式。但是，这样的实现却有两个突出的问题：
1.只能绑定一个回调函数。如果要实现多绑定，必须自己写很多代码来封装要回调的函数到一个函数中。
2.不能传递参数。因为onshow只能赋给函数名，即函数体本身，并不能传递参数进去，为了传递参数，我曾写过一篇：《用外壳包装法给javascript触发器传递参数》，可见，同样需要写很多代码。
那么，这些问题怎么解决呢？javascript内置对象的事件使用我们就暂时不管，来考虑一下怎么在自己实现的类中避免如上两个问题。实现之前，先来考虑下面这个问题，或许有助于理解实现这个功能的意义：
我的页面需要用javascript进行一些初始化，但初始化必须在页面载入完成之后进行。通常我们会将代码放到html文件最下面。但此时，在页面载入完成之前，页面上的按钮点击需要调用必须经过初始化的方法，如果不作判断，那么就很容易出现脚本错误。因为还没有初始化，一个简单的想法是：用一个bool变量loaded来判断，初始为false，初始化完成后为true，那么按钮点击时遇到false就简单返回。这实现固然简单，但有可能造成用户发现点击无效，而不知其所以然。所以完善的做法应该是能捕获这个方法，将其绑定到页面载入完成事件上，当页面载入完成后自动调用。
好，现在看事件设计模式的实现代码：
myClass.prototype={
initialize:function(){
this.initEvent=new Object();
},
init:function(){
//初始化要执行的语句
//下面是调用绑定的回调函数
for(var p in this.initEvent){
//extend是内置方法，不可作为回调关键字
if(p=="extend")continue;
this.initEvent[p].apply(_object,[]);
}
},
attachOnInit:function(_key,_object,_method,_arguments){
this.initEvent[_key]=createFunction(_object,_method,_arguments);
},
}
function createFunction(_object,_method,_arguments){
return function(){
_method.apply(_object,_arguments);
}
}
这段代码就实现了一个类myClass，具有init方法，触发oninit事件，使用时要想绑定一个事件，可以调用attachOnInit方法，参数的意思分别为：_key，回调参函数的唯一标识，如果重复，后者覆盖前者；_object回调函数的对象，如果是直接在script中的函数，可以传递this指针进去，即document对象；_method，要回调的函数，注意，这是一个函数名，不是字符串；_arguments，回调函数的参数数组。还有一个函数是createFunction，作用是包装一个函数，使其内置参数，这是外壳包装法那篇文章的一个通用实现。如果大家看过ajax之旅系列的前两篇文章，应该容易理解上面的代码，如果有什么问题，欢迎评论。
使用示例：
alert(s);
}
var myObj=new myClass();
myClass.attach("key1",this,myFunc,[123]);
myClass.init();
这就将myFunc函数绑定到myObj的init函数，执行后会弹出对话框123
====================================================================================================================
事件使得客户端的 JavaScript 有机会被激活，并得以运行。在一个 Web 页面装载之后，运行脚本的唯一方式，就是响应系统或者用户的动作。虽然从第一个支持脚本编程的浏览器面世以来，简单的事件被实现为 JavaScript 的一部分；但是大多数最近出现的浏览器都实现了强壮的事件模型，使脚本可以更加智能地处理事件。现在的问题在于：为了支持各种浏览器，您必须和多个先进的 事件模型做斗争，准确地说，是三个。
这三个事件模型分别和下面的文档对象模型（Document Object Model，即 DOM）三巨头结盟：Netscape Navigator 4 (NN4)，Macintosh 和 Windows 系统的 Internet Explorer 4 及其更新版本(IE4+)，以及在 Safari 中得到实现的 W3C DOM。尽管这些模型之间有些地方存在一些本质的差别，但是在一些简易的 JavaScript 的帮助下，它们都可以同时适用于同一个文档。本文主要着眼于相互冲突的事件模型中的两个关键方面：
·把一个事件和 HTML 元素绑定起来的方法。
·在事件被触发后如何对之进行处理。
事件绑定的方法
事件绑定是指构造一个响应系统或者用户动作的 HTML 元素的过程。在不同的浏览器版本中，有不少于五种事件绑定技术。下面我们快速地介绍一下这些技术。
事件绑定方法I：绑定元素属性
最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。尽管HTML属性并不是大小写敏 感的，人们还是定义了一个规则，规定事件类型的每一个“词”的首字母大写，比如 onClick 和 onMouseOver。这些属性也被称为事件处理器，因为它们指示了元素如何“处理”特定的事件类型。
正确的事件处理器属性的值在形式上是被引号包含的 JavaScript 语句。最常见的值是一条调用某个脚本函数的语句，而被调用的函数在位于
文档前部的 <SCRIPT> 标识中定义--该标识通常位于 <HEAD> 部分。举例来说，下面的函数：
function myFunc() {
// script statements here
}
可以被定义为一个按键控件的事件处理器，按键的定义如下：
<INPUT TYPE="button" NAME="myButton" VALUE="Click Here"
onClick="myFunc()">
把事件绑定到元素属性上有一个优点，即可以支持开发者把参数传递给事件处理器函数。接收事件的元素的引用则由一个特殊的参数值--this
关键字来传递。下面的代码演示一个函数如何借助传入参数，把任意数目的文本框的内容转化为大写：
<SCRIPT LANGUAGE="JavaScript">
function convertToUpper(textbox) {
textbox.value = textbox.value.toUpperCase();
}
</SCRIPT>
...
<FORM ....>
<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">
<INPUT TYPE="text" NAME="last_name" onChange="convertToUpper(this)">
...
</FORM>
事件绑定方法II：绑定对象属性
对于 NN3+ 和 IE4+ 这两类浏览器，脚本编程人员可以以脚本语句的方式把事件绑定到对象上，而不是绑定到元素标识的属性上。每一个负责事件响应的元素对象都为自己能够识别的事 件设置了相应的属性。对象属性名称是元素标识属性的小写形式，比如 onmouseover。NN4 还接受 interCap（即首字小写，之后的每一个词的首字大写）版本的属性名，但是考虑到跨浏览器的兼容性，所有字母都是小写的名称会更安全一些。
当您把一个函数的引用赋值给一个事件属性的时候，就发生了绑定。函数的引用是指函数的名称，但是不带函数定义中的括号。因此，如果要
为一个名为 myButton 的按键的点击事件（click）进行绑定，使之激活一个定义为 myFunc() 的函数，则其赋值语句如下所示：
document.forms[0].myButton.onclick = myFunc;
您应该注意一点：在事件触发的时候，没有办法向事件函数传递参数。本文在稍候对事件处理过程的讨论中还会回顾这个问题。
事件绑定方法III: 绑定 IE4+<SCRIPT FOR> 标识
在 IE4+ 中，Microsoft 对 <SCRIPT> 标识实现了自己的扩展，可以将它包含的脚本语句和某个元素的一个事件类型进行绑定。支持这个绑定的标识属性（还没有被 W3C 批准为 HTML 的一部分）是 FOR 和 EVENT。
FOR 属性的值必须是您为元素的 ID 属性分配的唯一标识符。然后，您必须把事件的名称（onmouseover，onclick，等等）分配给 EVENT 属性。在上面的按键实例的基础上，我们必须对按键标识进行修改，使之包含一个 ID 属性：
<INPUT TYPE="button" NAME="myButton" ID="button1" VALUE="Click Here">
脚本语句并不在函数中，而是在 <SCRIPT> 标识中，如下所示：
<SCRIPT FOR="button1" EVENT="onclick">
// script statements here
</SCRIPT>
当然，标识中的语句可以调用页面上其它地方定义的任何函数（或者从.js文件中导入的函数）。然而，这种绑定方式意味着您必须为每一个元素和每一个事件创建一个 <SCRIPT FOR> 标识。
您还必须小心，只能把这种绑定方法部署在仅供 IE4+ 浏览器浏览的页面。其它任何支持脚本编程而又没有实现这个特殊的 <SCRIPT> 标识的浏览器（包括 IE3），都将把它作为常规的 <SCRIPT> 标识来处理，并试图在页面装载的时候执行这些脚本语句--这不可避免地引起脚本错误。
事件绑定方法IV：使用 IE5/Windows 的 attachEvent() 方法
早在 W3C DOM 工作组磨砺出标准的事件模型之前，attachEvent() 方法已经被实现了，并且可被用于 Windows 版的 IE5 或更新版本的浏览器上的每一个 HTML 元素。
attachEvent() 方法的用法如下所示：
elemObject.attachEvent("eventName", functionReference);
eventName 参数的值是表示事件名称的字符串，比如 onmousedown。functionReference 参数是一个不带括号的函数引用，和早些时候描述的事件属性方法中一样。因此对于上面例子的按键对象，可以通过如下的脚本语句把函数绑定到按键的 click 事件：
document.getElementById("button1").attachEvent("onclick", myFunc);
由于 attachEvent() 方法必须严格工作在 IE5+/Windows 的环境中，所以您既可以使用 W3C DOM 的元素引用方式（如上文所示），也可以使用 IE4+ 的引用方式：
document.all.button1.attachEvent("onclick", myFunc);
这个方法有一个值得注意的地方：您不能在元素被载入浏览器之前执行这个语句。该对象的引用在相应的 HTML 按键元素被浏览器创建之前，都是无效的。因此，要让这样的绑定语句或者在页面的底部运行，或者在 BODY 元素的 onLoad 事件处理器调用的函数中运行。
事件绑定方法V：使用 W3C DOM 的 addEventListener() 方法
Safari 使用的是 W3C DOM 级别2定义的事件绑定机制，这个机制和 IE5/Windows 的 attachEvent() 方法很类似，但是有自己的语法。W3C DOM 规范为 DOM 层次中的每一个结点都定义了一个 addEventListener() 方法。HTML 元素是 DOM 结点中的一类，在一对元素标识内部的文本结点也是一个结点，也能够接收事件。这一点在 NN6 事件处理过程中经常得到体现，在本文的后面部分您将会看到。
addEventListener() 方法的语法如下所示：
nodeReference.addEventListener("eventType", listenerReference, captureFlag);
用 W3C DOM 规范中的行话来说，addEventListener() 方法为指定的结点注册了一个事件，表示该结点希望处理相应的事件。这个方法的第一个参数是一个声明事件类型的字符串（不带"on"前缀），比如 click，mousedown，和 keypress。addEventListener() 方法的第二个参数可以和早些时候描述过的函数引用同样对待。第三个参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。事件的捕捉和派发---综合起来称为事件的传播--最后由另一篇文章来描述。对于一个典型的事件 侦听器来说，第三个参数应该为 false（假）。
那种绑定方法最好？
如果您足够幸运，只需要为某一个操作系统上特定版本的浏览器创建应用程序，则可以为选定的浏览器选择最现代的绑定方式。但是对于跨浏览 器的网站作者来说，选择绑定方法则需要面对实质性的挑战。如果您只计划支持 IE5/Mac，则可以不考虑 attachEvent() 和 addEventListener() 方法，因为 IE5/Mac 对这两种方法都不支持。这种情况下，比较实际的选择有两种，要么绑定标识属性，要么绑定对象属性。这时就需要费心思了。
一方面，W3C DOM Level 2 承认基于标识属性的方法，并将它推荐为 addEventListener() 方法的可接受代替方法。为了和数以百万计的脚本相兼容，所有支持脚本编程的浏览器都支持基于标识属性的事件绑定方法。一些自动化的页面制作工具，比如 DreamWeaver，也把事件处理器的属性嵌入到 HTML 标识中。但是另一方面，在元素标识文件中嵌入面向脚本的信息，又不能将内容从风格及行为中分离开来，这和当前的流行趋势相违背。把事件绑定到对象属性上的 方法听起来方向是对的，但是在 W3C 关于 HTML，XHTML，或者 DOM 的标准中，并没有对事件属性提供“官方”的支持。尽管如此，在实际生活中，除了第一代支持脚本编程的浏览器之外，其它浏览器都支持这种方法。一个纯标准论 者会认为上述的两种方法都有缺点，但是对于讲究实际的开发者来说，即使考虑到未来主流浏览器的兼容性，这两种方法都是“安全”的。
事件的信息矿：事件对象
所有这三种事件模型的核心都是一个事件对象--它是一个抽象的实体，其属性中包含很多对事件处理函数具有潜在价值的信息。从本文早些时候对事件绑定技术的 讨论中，您可能可以推断出事件对象对脚本之所以至关重要，原因之一是除了基于标识属性的绑定方法以外，其它绑定方法都不支持将参数传递到事件处理函数中。 事件对象通过提供足够的“挂钩”，使事件处理函数可以读取事件的特征，从而填补了这个缝隙。因此，事件处理函数可以得到接收事件的元素的引用，以及其它一 些有用的信息，比如鼠标动作的坐标，鼠标使用的按键，键盘上被按压的键，以及在事件发生的过程中是否有修饰键被按下（比如检测 Shift-click 事件）。
访问事件对象
虽然事件对象的精确构成因为本文讨论的三种 DOM（NN4，IE4+，以及 W3C/Safari）的不同而有所变化，但是，一个事件处理函数只能通过以下两种方式之一来访问事件对象：NN 方式和 IE 方式。W3C/Safari DOM 事件对象公布给脚本的接口方式和 NN4 的事件对象一样；而 IE4+ 则有自己的方法。IE4+ 的事件对象更加易于描述，因此我们首先对它进行讨论。简单地说，事件对象是 window 对象的一个属性。这意味着在所有的实例中只有一个事件对象。举例来说，在键盘上简单地按压和松开一个按键，会产生三个事件：onKeyDown， onKeyPress，和 onKeyUp（事件的发生顺序和这里的列举顺序相同）。如果 onKeyDown事 件激活的函数花费很长的时间进行处理，则浏览器就会把其它两个事件保持在队列中，直到 onMouseDown 事件处理完成为止。而对于 NN4 和 W3C DOM 来说，事件对象看起来就更加抽象一些。除了基于标识属性风格的绑定方法之外，其它绑定方法都是把事件对象自动传递给与事件相绑定的函数。传递给函数的是一 个单一的参数。开发者需要在函数中定义一个参数变量，来“接收”该参数的值。为了避免和IE中的 window.event 对象互相冲突，请不要把参数命名为 event。举例来说，把它命名为 evt 就相当好，相应的事件函数的定义大致如下：
function myFunc(evt) {
// script statements here
}
然而，如果您使用的是基于标识属性的事件绑定技术，就必须显式地把事件作为一个参数传递到您调用的函数。为了完成事件的传递，需要把 event 这个关键字作为参数进行传递：onClick = "myFunc(event)"外部传入的参数是您的事件处理函数和 NN 的事件对象之间的唯一联系纽带。如果在主事件处理函数内部调用的其它函数需要该对象或者该对象的属性值，则您可以把该对象或其属性值作为参数中继给这些函 数。如果您想知道 IE 是否把事件的引用保存在 window.event 属性中，那答案是“是”。使用这个语法交集是相当安全的，因为在 NN 和 IE 这两个浏览器，被传递到事件处理函数的事件对象都有您所期望的当前事件的属性值。
兼容两种事件对象引用
设想在处理事件时，我们需要在一个事件函数中考察一个或者多个事件属性。这是一个简单的技术，可以使事件处理函数和作为参数传入的事件对象协同工作，或者 从 window.event 属性中读取信息。而且，这个技术不必处理不同的浏览器版本之间的细微差别。在开始的时候，需要在您的事件处理函数中定义一个参数变量，准备接收可能传入的 事件对象。然后，通过简单的条件表达式把浏览器的事件对象赋值给上述的参数变量：
function myFunc(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
// process event here
}
如果事件对象真的以参数的形式传进来了，则在函数内部，事件对象就被保留在 evt 这个局部变量中。如果这个参数是 null，而且浏览器的 window 对象包含有一个 event 属性，则 window.event 对象就会把自己赋值给 evt 变量。然而，为了完成这个工作，还应该再包含一层或者多层条件控制，以便优雅地适应那些在事件模型中没有定义事件对象的的早期浏览器：
function myFunc(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
// process event here
}
}
为了把同样的方式应用到所有事件处理函数的构建中，您可以定义一个函数来兼容两种事件，即由绑定的标识属性显式传入的事件对象，以及由绑定的事件属性隐式传入的事件对象。这样即使您在开发过程中改变了事件绑定的风格，这个函数也不必改变。
瑞典自助餐式地选择事件对象
然而，建立一个指向事件对象的引用只是战斗的一部分。来自不同事件模型的每一个事件对象都拥有自己的一套属性，以容纳事件的细节。下面的表格列出了最常用的属性，以及这些属性在上述三种事件对象类型中的名称。
表格 1. 流行的事件对象属性
| 描述 | NN4 | IE4+ | W3C/Safari |
|---|---|---|---|
| Event target | target |
srcElement |
target |
| Event type | type |
type |
type |
| X coordinate on page | pageX |
* | pageX |
| Y coordinate on page | pageY |
* | pageY |
| Mouse button | which |
button |
button |
| Keyboard key | which |
keyCode |
keyCode |
标注*的属性值可以通过对 event.clientX + document.body.scrollTop 或者 event.clientY + document.body.scrollTop 进行求值来得到。
Macintosh 版本的IE5在通常情况下都遵循 IE4+ 的事件对象模型，但是有一个例外，即 IE5/Mac 的事件对象既定义了 srcElement 属性，也定义了 target 属性，这两个属性都指向接收事件的元素。需要抽象的最重要的事件对象属性可能得算指向接收事件的 HTML 元素的引用。NN4 和 W3C 的事件对象采用相同的属性名（target），而 IE4+ 的事件对象则使用 srcElement 属性。这时候，对象检测技术（而不是费力劳神而又具有危险倾向的浏览器版本识别方法）再次拯救了我们。对于那些非文本容器的元素，一个简单的条件表达式就 可以轻松处理脚本语法上的差别：
var elem = (evt.target) ? evt.target : evt.srcElement
从现在开始，您的脚本就可以读写任何浏览器对象模型公布出来的元素对象属性了。
W3C DOM结点的事件目标
W3C DOM 的结点架构使得文档中的每一个结点都可以接收事件。在支持这一架构的浏览器中，发生在嵌套文本顶上的事件并不调用分配给文本容器的事件处理器，相应的文本结点才是该事件的目标结点。考虑如下场景：
在事件实例，当鼠标的指针在一个 SPAN 元素包含的文本顶上滚动时，该文本就会被高亮显示。 事件绑定的过程通过对象属性在 init() 函数中进行。从表面上看，当用户在 SPAN 元素顶上滚动鼠标时，onMouseOver 事件动作函数就为该元素指派一个与风格表单规则相关联的类名（highlight），该风格规则把文本的显示风格定义为粗体，黄色背景；而在 onMouseOut 函数中，则把风格恢复为原始的版本（类 normal）。请注意一个 toggleHighlight() 函数是如何在事件对象的 type 属性的帮助下，执行两个动作的（该属性在所有事件模型对象中的名称是相同的）。请试一下这个事件实例。但是如果您把例子装载到 NN6，则鼠标事件的真正目标就是 SPAN 元素中的文本结点了。本文并不讨论事件的传播机制，但是请相信，W3C DOM 事件模型的缺省行为会使事件沿着结点的包含层次向上传播（和 IE4+ 中事件通过元素容器向上传播的机制很类似）。因此，在这个事件实例中。鼠标事件会从其真正的目标向上传递到文本结点的容器（也就是 SPAN 元素）。这些事件触发了 SPAN 元素中相应的事件处理器。虽然事件处理器属于 SPAN 元素，事件对象还是保留文本对象的引用，并将它作为事件的原始目标。然而，只有对文本结点的容器进行动作，才能修改它的风格。为了实现 toggleHighlight() 函数的等价操作，使之可以修改SPAN容器的 className 属性，该函数需要派生出一个指向文本结点容器的引用。一个策略是使用 W3C DOM 事件对象的 currentTarget 属性，该属性返回一个处理事件的结点的引用。脚本中的决策树需要考虑这个属性，增加代码之后的 toggleHighlight() 函数如下所示：
function toggleHighlight(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
var elem
&nb
sp; if (evt.target) {
if (evt.currentTarget && (evt.currentTarget != evt.target)) {
elem = evt.currentTarget
} else {
elem = evt.target
}
} else {
elem = evt.srcElement
}
elem.className = (evt.type == "mouseover") ? "highlight" : "normal"
}
}
另一个可选的方法是考察由 target 属性返回的对象的 ronodeType 属性。一个能够把事件定向给文本结点的浏览器，也可以把一个文本结点的 nodeType 属性值报告为3，而不是报告为元素结点的类型（其值为１）。如果事件的目标是一个文本结点，则脚本程序就可以通过该文本结点的 parentNode 属性来得到其上级元素结点的引用。这种方法的决策树在某种程度上得到更多的改进：
function toggleHighlight(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
var elem
if (evt.target) {
elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
} else {
elem = evt.srcElement
}
elem.className = (evt.type == "mouseover") ? "highlight" : "normal"
}
}
如果您正在用遵循 W3 的浏览器阅读本文，则请尝试这个修改过的版本，看看鼠标滚动时的风格变化。这个页面使用了嵌入到事件实例中的最新版本的 toggleHighlight() 函数，展示了如何使用 JavaScript 为那些能够显示期望效果的浏览器增加额外的价值，同时也可以那些基本的内容提供给仍然使用着较老版本或者不支持脚本编程的浏览器的用户，只不过在模式上不 那么动人和便于交互。
一个事件处理函数的模板
并不是每个事件处理函数都处理页面元素对象中同样的属性或者行为，但是，从上文的讨论可以派生出来的一个模板，您可以在这个模板的帮助下开始编码。模板如下：
function functionName(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
var elem
if (evt.target) {
elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
} else {
elem = evt.srcElement
}
if (elem) {
// process event here
}
}
}
请把第一行的函数名替换为您希望的函数名，并在注视指示的地方开始书写具体事件的代码。这个格式应该可以为您提供一个起点，适合于您采用的任何跨浏览器的 事件绑定风格。如果您需要在一个页面中多次使用这个格式，则可以进一步精简代码，即把读取目标的代码抽象成一个可重用的工具函数，然后在每一个事件处理函 数中进行调用：
// shared function
function getTargetElement(evt) {
var elem
if (evt.target) {
elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
} else {
elem = evt.srcElement
}
return elem
}
function functionName(evt) {
evt = (evt) ? evt : ((window.event) ? window.event : "")
if (evt) {
var elem = getTargetElement(evt)
if (elem) {
// process event here
}
}
}
有了这类框架，您现在应该可以把更多的注意力集中在各个事件处理函数要求的具体动作中了。