JavaScript Event学习第四章：传统的事件注册模型

在最古老的JavaScript浏览器里注册事件只能通过内联模式。自从DHTML从根本上改变了你操作页面的方法，事件的注册就必须有扩展性而且要有很强的适应性。所以就必须有相应的事件模型。Netscape在第三代浏览器中就开始了，IE在第四代浏览器开始。

因为Netscape 3就开始支持这种新的事件注册模型，在浏览器战争前就是事实上的标准。所以微软不得不也是最后一次为了网上那些数不清的使用了Netscape事件处理模型的页面在兼容性上做出了让步。

所以这两个浏览器，事实上也是所有的浏览器都支持下面的代码：

element.onclick = doSomething;<BR>

这是注册一个事件的最好的办法。无论什么时候用户点击了这个HTML元素，那么doSomething()都会执行。这是唯一一个能够跨浏览的注册事件的最好的办法，深刻的理解这个模型和他的限制也是非常重要的。

因为没有官方的标准，所以我暂且称为传统事件注册模型(traditional event registration model)。同时，w3c也标准化了事件注册，微软也推出了高级模式，但是传统模式依然能很好的运行。

高级事件注册程序
从Netscape 3/IE 4开始，JavaScript能够识别元素上的一系列事件的属性。大多数HTML元素都有onclick,onmouseover,onkeypress等等属性。那些元素有哪些属性--哪些元素支持哪些事件--都依赖于浏览器。

这些属性对于他们本身也不是什么新颖的东西。在最古老的JavaScript浏览器里面就已经存在了。

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

这里的A标签就有一个onclick参数，在JavaScript里面就成为了A元素的属性。那些古老的浏览器的事件处理程序只能通过在页面源代码里面设置元素的参数这个办法来注册。如果你想让这个脚本在所有的A标签执行，那么你就需要再所有的链接上面加上onclick事件。

有了传统事件注册模型的到来，这些onclick，onmouseover或者HTML元素的其他事件处理就都可以通过JavaScript来注册了。现在你可以添加、修改或者删除一些事件处理程序而不用动HTML的一丝一毫。当你通过DOM来访问HTML元素的时候你就可以像下面这样写代码了：

element.onclick = doSomething;<BR>

现在我们的示例函数doSomething()就注册在了element元素的onclick属性上，而且当用户点击了这个元素函数就会执行。注意事件的名字必须都是小写。

删除这个事件处理程序，只要简单的让点击事件为空就行了：

element.onclick = null;<BR>

事件处理程序跟普通的JavaScript函数一样。即使事件没有发生的时候他也能执行。如果你则这样写：

element.onclick()<BR>

那么doSomething一样会执行。虽然如果是一个不知道做什么或者产生错误的函数，这也没有真实的事件发生。所以这是一种很少用来执行事件处理程序的方法。

微软的IE5.5和更高版本的IE还有一个fireEvent()方法来完成同样的事情。使用如下：

element.fireEvent('onclick')<BR>

没有括号
需要注意的是注册一个事件处理程序的时候你不能使用括号。onclick方法会被设置成为另外一个函数。如果你这样写

element.onclick = doSomething();<BR>

那么这个函数就会执行并且它的结果会被注册到onclick上。这可不是我们所期望的，我们只是希望在事件发生的时候函数能够执行。另外函数写出来是为了在事件发生的时候执行，如果没有关联的执行会造成严重的混乱和错误。

所以我们在事件处理程序中复制整个doSomething()方法。我们只是想在事件执行的时候执行这个函数。

this
在JavaScript里this关键字通常指函数的所有者。如果this指向事件发生的HTML元素，那么一切都是那么的美好，你可以很简单的做很多事情。

不幸的是，虽然this非常的强大，但是如果你不是明确的知道他怎么运作的话使用起来还是比较难的。关于这个我在另一个地方有详细的讨论，在这我在传统模式下做一些概述。

在传统模式里this工作如下；注意这个跟内联模式稍微有些不同。现在this关键字在函数里，而不是在HTML的参数上。这个区别后面会另外讲的。

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠