事件使得客户端的 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 对这两种方法都不支持。