页面性能优化之事件委托

原文地址
http://www.ueder.net/2011/01/09/%e9%a1%b5%e9%9d%a2%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e4%b9%8b%e4%ba%8b%e4%bb%b6%e5%a7%94%e6%89%98/

在现代web追求富媒体应用(RIA)的时代，为页面添加事件成为实现复杂交互行为的很重要的一部分，然而在javascript中为页面添加很多的事件是会造成性能问题的，特别是在IE中，原因可能有很多方面，首先，每个事件都会绑定一个函数function，而每个function都会占内存，其次，页面加载时必须事先指定所有页面事件处理程序，会延迟整个页面的交互就绪时间。

所谓事件委托就是利用事件的冒泡特性，只需为所有需要添加事件的子元素的父元素添加一个事件处理程序就可以满足应用。在DOM标准中，事件支持捕获及冒泡过程，但IE中只支持冒泡过程，所以我们只需要关注冒泡过程。看下面一段代码

[隐藏代码]

<ul id="list">        <li id="list1">列表1</li>        <li id="list2">列表1</li>        <li id="list3">列表1</li></ul>

在上面这段代码中，如果我们需要alert出每个li的innerHTML，传统方法是:

[隐藏代码]

var items = document.getElementById("list").getElementsByTagName("li");for(var i=0,len=items.length; i<len; i++){        items[i].onclick = function(){                alert(this.innerHTML);        };}

这样我们就为页面添加了三个事件处理程序，如果在更复杂的更多的li元素的页面，那么事件处理程序就会更多，会影响到页面性能，此时我们可以利用事件冒泡优化性能，如下面代码:

[隐藏代码]

//事件封装var EventUtil = {                getEvent:function(e){                        return e || event;                },                getTarget:function(e){                        return e.target || e.srcElement;                }        };//var list = document.getElementById("list");list.onclick = function(e){        //获取事件目标        var evt = EventUtil.getEvent(e);        var target = EventUtil.getTarget(evt);        //        alert(target.innerHTML);};

在这段代码里，我们只为父级元素添加了一个onclick事件，然后根据target获取事件实际的作用对象，然后执行我们需要的代码，这样我们只创建了一个事件处理程序，相较前面的传统代码得到了优化。

如果可以的话，也可以考虑为document添加事件处理程序，以减少在具体元素上添加各种事件，而且document在页面加载时是最先呈现的，几乎随时都可调用到。

另一个与事件有关的影响性能的则是事件的移除，我们在页面中的DOM操作常常会移除一些页面元素，而这些元素可能会带有事件，看下面的例子:

[隐藏代码]

<div id="form">        <button type="submit" id="btn">提交</button></div><script type="text/javascript">        var btn = document.getElementById("btn");        btn.onclick = function(){                //执行一些操作...                document.getElementById("form").innerHTML = "已提交，等待中..."        };</script>

上面的代码中点击按钮后移除了按钮，但按钮上的onclick事件并没有移除，事件会驻留在内存中，特别是IE不能很好的处理，此时我们可以在事件无用的时候手动移除，如下：

[隐藏代码]

<div id="form">        <button type="submit" id="btn">提交</button></div><script type="text/javascript">        var btn = document.getElementById("btn");        btn.onclick = function(){                //执行一些操作...                btn.onclick = null; //移除事件处理函数                document.getElementById("form").innerHTML = "已提交，等待中..."        };</script>

所以我们在往页面添加事件的时候，在不用的时候记得移除，释放内存。