开发学院网页设计 JavaScript JavaScript Event学习第四章：传统的事件注册模型... 阅读

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

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示： 这些代码可以运行，没问题，JavaScript Event学习第四章：传统的事件注册模型(4)，但是既然over()和out()都比较简单，那么就可以用一种更优雅的匿名函数的方法来写：1... for(vari=0;i<x.length;i++){ x[

这些代码可以运行，没问题。但是既然over()和out()都比较简单，那么就可以用一种更优雅的匿名函数的方法来写：

1　... 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事件。

所以事情可能会是这样：

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

这是就会发生错误。第二个注册程序会覆盖第一个，那么当用户点击元素的时候就只有spyOnUser()执行。

解决办法就是注册一个包含两个方法的方法：

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

灵活的注册

但是假设你没有在你网站的每个页面都使用两个模块。如果你还这样写：

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

你会得到一个错误信息因为其中有个函数是未定义的。所以在注册事件的时候要特别的小心。当我们在startDragDrop()可能已经注册的时候还想注册spyOnUser()，那么我们可以这样写：

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

首先你定义一个变量old。如果元素已经有了一个onclick的事件处理程序，那么就把它存入old，如果没有，就设置old为一个空的 function。现在你要给一个div注册一个新的事件处理程序。那么程序就会首先执行old()，然后执行spyOnUser()。现在新的事件处理程序添加在了元素上，之前的注册过的（如果有）也被包含了。

最后一个问题：如果你想移除其中一个事件处理程序呢？现在我还不是很确定。你需要通过一些方法编辑element.onclick()，我还没有研究过这个问题。

其他模式

我们看到传统模式非常的简单易用，但是当你给一个事件添加几个程序的时候的解决办法还是比较丑陋的。W3C的事件处理程序很好的解决了这个问题。

原文地址：http://www.quirksmode.org/js/events_tradmod.html

文章出处：http://beiyu.cnblogs.com

编缉推荐阅读以下文章