JavaScript 传统事件注册模型详解：原理、局限与解决方案

传统事件模型的历史与背景

在早期浏览器中，注册事件仅支持内联模式。随着 DHTML 彻底改变了页面操作方式，事件注册需要具备扩展性和适应性，从而催生了相应的事件模型。Netscape 在第三代浏览器中率先实现，IE 则在第四代浏览器中跟进。

由于 Netscape 3 已支持这种新的事件注册模型，它在浏览器大战前已成为事实标准。因此，微软不得不做出让步，在兼容性上支持这一广泛使用的 Netscape 事件处理模型，这也是其最后一次此类妥协。

这两个浏览器，以及后续所有主流浏览器，都支持以下代码实现：

 
element.onclick = doSomething;

这是注册事件的最佳方式。当用户点击该 HTML 元素时，doSomething() 函数将被执行。这是唯一一种跨浏览器兼容的事件注册最佳实践，深入理解此模型及其限制至关重要。

由于缺乏官方标准，我将其暂称为传统事件注册模型（traditional event registration model）。尽管 W3C 随后标准化了事件注册，微软也推出了高级模式，但传统模式依然运行良好。

传统事件注册机制详解

高级事件注册程序

从 Netscape 3 和 IE 4 开始，JavaScript 能够识别元素上的一系列事件属性。大多数 HTML 元素都具备 onclick、onmouseover、onkeypress 等属性。具体哪些元素支持哪些事件，取决于浏览器的实现。

这些属性本身并非新事物。在最早的 JavaScript 浏览器中就已经存在。

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

这里的 A 标签包含一个 onclick 参数，在 JavaScript 中成为 A 元素的属性。早期浏览器的事件处理程序只能通过修改页面源代码中的元素参数来注册。若希望脚本在所有 A 标签上执行，必须在每个链接上添加 onclick 事件。

传统事件注册模型的引入，使得 onclick、onmouseover 等 HTML 元素的事件处理可以通过 JavaScript 进行注册。现在，你可以添加、修改或删除事件处理程序，而无需触碰 HTML 代码。通过 DOM 访问 HTML 元素时，代码如下：

 
element.onclick = doSomething;

此时，示例函数 doSomething() 已注册到 element 元素的 onclick 属性上，用户点击元素时该函数即被执行。注意事件名称必须为小写。

要删除此事件处理程序，只需将点击事件设为空即可：

 
element.onclick = null;

事件处理程序与普通 JavaScript 函数无异，即使事件未发生也可执行。若按以下方式书写：

 
element.onclick()

doSomething 仍会执行。虽然若函数未知或产生错误，且无真实事件发生，这并非预期行为，因此这是一种极少用于执行事件处理程序的方法。

微软 IE 5.5 及更高版本还提供了一个 fireEvent() 方法来完成相同操作，使用方式如下：

 
element.fireEvent('onclick')

注意无括号。

注册事件处理程序时不能使用括号。onclick 方法会被设置为另一个函数。若按以下方式书写：

 
element.onclick = doSomething();

该函数将立即执行，其返回值将被注册到 onclick 上。这并非我们期望的行为，我们仅希望在事件发生时执行函数。此外，函数旨在事件发生时执行，若无关联执行会导致严重混乱和错误。

因此，我们在事件处理程序中复制整个 doSomething() 方法，仅在事件执行时调用该函数。

this 关键字与匿名函数的应用

this

在 JavaScript 中，this 关键字通常指函数的所有者。若 this 指向发生事件的 HTML 元素，一切将变得简单，你可以轻松实现多种功能。

不幸的是，尽管 this 功能强大，但若未明确其运作机制，使用难度较大。关于此点，我在其他地方有详细讨论，此处仅对传统模式做简要概述。

在传统模式中，this 的工作方式如下：注意这与内联模式略有不同。现在 this 关键字位于函数内部，而非 HTML 参数中。这一区别将在后文单独讲解。

 
element.onclick = doSomething;
another_element.onclick = doSomething;
function doSomething() {
this.style.backgroundColor = '#cc0000';
} 

若将 doSomething() 注册为任一 HTML 元素的 click 事件，当用户点击该元素时，元素背景色将变为指定颜色。

匿名函数 (Anonymous functions)

假设希望所有 div 在鼠标经过时改变背景色，离开时恢复。正确使用 this，代码如下：

 
var x = document.getElementsByTagName('DIV');<BR>for (var i=0;i<x.length;i++) {<BR> x[i].onmouseover = over;<BR> x[i].onmouseout = out;<BR>}<BR><BR>function over() {<BR> this.style.backgroundColor='#cc0000'<BR>}<BR><BR>function out() {<BR> this.style.backgroundColor='#ffffff'<BR>}<BR><BR>

上述代码运行无误。但由于 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 和 onmouseout 均接收一个函数，与其拷贝 over() 和 out()，不如直接在事件注册脚本中定义事件处理程序。由于这些函数没有名称，它们即为匿名函数。

这两种注册事件处理程序的方法基本相同，唯一区别是第二种代码量更少。我偏爱匿名函数，并在注册简单事件处理程序时使用它。

多事件注册冲突与解决方案

问题

传统模式下，onclick 属性仅能包含一个函数。当试图对一个事件注册多个事件处理程序时，问题便会出现。

例如，你已编写一个可拖动模块，该模块注册在 onclick 事件处理程序上，点击时即可开始拖动。你还编写了一个模块，用于跟踪用户点击并在 onunload 时向服务器发送信息，以了解页面使用情况。该模块也需要在元素上注册一个 onclick 事件。

因此，情况可能如下：

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

这将导致错误。第二个注册程序会覆盖第一个，因此当用户点击元素时，仅执行 spyOnUser()。

解决方案是注册一个包含两个方法的函数：

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

灵活注册

但假设你并非在每个网站页面都使用这两个模块。若仍按以下方式书写：

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

你将收到错误信息，因为其中一个函数未定义。因此，注册事件时需格外小心。当 startDragDrop() 可能已注册，而你想注册 spyOnUser() 时，可如下书写：

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

首先定义变量 old。若元素已有 onclick 事件处理程序，将其存入 old；若无，则将 old 设为空函数。现在，你要为 div 注册新事件处理程序。程序将首先执行 old()，然后执行 spyOnUser()。此时，新事件处理程序已添加至元素，之前的注册（若有）也被包含在内。

最后一个问题：若想移除其中一个事件处理程序呢？目前尚不确定。你需要通过某种方法编辑 element.onclick()，我尚未深入研究此问题。

其他模式

我们看到传统模式简单易懂，但在为一个事件添加多个处理程序时，解决方案略显丑陋。W3C 的事件处理程序很好地解决了这一问题。

继续

若想继续学习，请看下一章。