内存优化之移除事件处理程序

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

在移除文档元素时，如果带有事件处理程序的元素被innerHTML 删除了，那么原来添加到元素中的事件处理程序极有可能无法被当作垃圾回收。来看下面的例子。

<div id="myDiv">
	<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function(){
    //先执行某些操作
    document.getElementById("myDiv").innerHTML = "Processing..."; //麻烦了！
  };
</script>

这里，有一个按钮被包含在<div>元素中。为避免双击，单击这个按钮时就将按钮移除并替换成一条消息；这是网站设计中非常流行的一种做法。但问题在于，当按钮被从页面中移除时，它还带着一个事件处理程序呢。
在<div>元素上设置innerHTML可以把按钮移走，但事件处理程序仍然与按钮保持着引用关系。有的浏览器（尤其是IE）在这种情况下不会作出恰当地处理，它们很有可能会将对元素和对事件处理程序的引用都保存在内存中。如果你知道某个元素即将被移除，那么最好手工移除事件处理程序，如下面的例子所示。

<div id="myDiv">
	<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
  var btn = document.getElementById("myBtn");
  btn.onclick = function(){
    //先执行某些操作
    btn.onclick = null; //移除事件处理程序
    document.getElementById("myDiv").innerHTML = "Processing...";
  };
</script>

注意，在事件处理程序中删除按钮也能阻止事件冒泡。目标元素在文档中是事件冒泡的前提。

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