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为一个空的function。现在你要给一个div注册一个新的事件处理程序。那么程序就会首先执行old()，然后执行spyOnUser()。现在新的事件处理程序添加在了元素上，之前的注册过的（如果有）也被包含了。
最后一个问题：如果你想移除其中一个事件处理程序呢？现在我还不是很确定。你需要通过一些方法编辑element.onclick()，我还没有研究过这个问题。
其他模式
我们看到传统模式非常的简单易用，但是当你给一个事件添加几个程序的时候的解决办法还是比较丑陋的。W3C的事件处理程序很好的解决了这个问题。
继续
如果你想继续学习，请看下一章。
您可能感兴趣的文章: