谈JavaScript中的移除空事件处理程序

每当将事件处理程序指定给元素时，运行中的浏览器代码与支持页面交互的JavaScript代码之间就会建立一个连接。这种链接越多，页面执行起来就越慢。所前所述，可以采用事件委托技术，限制建立的连接数量。另外，在不需要的时代移除事件处理程序，也是解决这个问题的一种方案。内存中留有那些过时不用的“空事件处理程序”，也是造成Web应用程序内存与性能问题的主要原因。

创新互联建站专注于网站建设|网站维护公司|优化|托管以及网络推广，积累了大量的网站设计与制作经验，为许多企业提供了网站定制设计服务，案例作品覆盖餐厅设计等行业。能根据企业所处的行业与销售的产品，结合品牌形象的塑造，量身策划品质网站。

在两种情况下，可能会造成上述问题，第一种情况就是从文档中移除带有事件处理程序的元素时，这可能是通过纯粹的DOM操作，例如使用removeChild()和replaceChild()方法，但更多地是发生在使用innerHTML替换页面中某一部分的时候。如果带有事件处理程序的元素被innerHTML删除了，那么原来添加到元素中的事件处理程序极有可能被当作垃圾回收。来看下面的例子：

var btn=document.getElementById("myBtn");

btn.onclick=function(){

document.getElementById("myDiv").innerHTML="Processing…";

}

这里，有一个按钮被包含在

元素中，为避免双击，单击这个按钮时就将按钮移除并替换成一条消息；这是网站设计中非常流行的一种做法。但问题在于，当按钮被从页面中移除时，它还带着一个事件处理程序呢，在

元素中设置innerHTML可以把按钮移走，但事件处理各种仍然与按钮保持着引用联系。有的浏览器（尤其是IE）在这种情况下不会作出恰当的处理，它们很有可能会将对元素和事件处理程序的引用都保存在内存中。如果你想知道某个元即将被移除，那么最好手工移除事件处理程序。如下面的例子所示：

var btn=document.getElementById("myBtn");

btn.onclick=function(){

btn.onclick=null;

document.getElementById("myDiv").innerHTML="Processing…";

}

在此，我们设置

的innerHTML属性之前，先移除了按钮的事件处理程序。这样就确保了内存可以被再次利用，而从DOM中移除按钮也做到了干净利索。

注：采用事件委托也有解决这个问题。如果事先知道将来有可能使用innerHTML替换掉页面中的某一部分，那么就可以不直接把事件处理程序添加到该部分的元素中，而通过把事件处理程序指定给最好层次的元素，同样能够处理该区域中的事件。

导致“空事件处理程序”的另一情况，就是卸载页面中的时候。毫不奇怪，IE在这种情况下依然是问题最多的浏览器，尽管其他浏览器或多或少也有类似的问题。如果在页面被卸载之前没有清理干净事件处理程序。那它们就会滞留在内存中。每次加载完页面再卸载页面时（可能是在两个页面间来加切换，也可以是单击了“刷新”按钮），内存中滞留的对象数目就会增加，因为事件处理程序占用的内存并没有被释放。

一般来说，最好的做法是在页面卸载之前，先通过onunload事件处理程序移除所有事件处理程序。在此，事件委托技术再次表现出它的优势——需要跟踪的事件程序越少，移除它们就越容易，对这种类似的操作，我们可把它想象成：只要是通过onload事件处理程序添加的东西，最后都要通过onunload事件处理程序将它们移除。

注：不要忘了，使用onunload事件处理程序意味着页面不会被缓存在bfcachek中，如果你在意这个问题，那么就只能在IE中通过onunload来移除事件处理程序了。

本文地址：http://www.yiiyaa.net/1361

【编辑推荐】

JavaScript重构模块划分和命名空间
Javascript闭包(closure) 深入浅出
论Javascript的类继承
学习Javascript闭包（Closure）
Javascript中闭包的作用域链

当前文章：谈JavaScript中的移除空事件处理程序
本文链接：http://www.shufengxianlan.com/qtweb/news9/57809.html

成都网站建设公司_创新互联，为您提供域名注册、全网营销推广、网站维护、静态网站、定制开发、定制网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容

网站建设知识

分类信息网