内存和性能
在JS中,添加到页面上的事件处理程序数量会影响页面的整体运行性能。第一,每个函数都是对象,都会占用内存;内存中的对象越多,性能就越差。第二,由于必须事先指定所有事件处理程序导致了多次的DOM访问,这造成了页面的交互就绪事件被延迟。
事件委托
事件委托解决了“事件处理程序过多”的问题。事件委托的原理是利用事件冒泡,将子元素的事件处理交给它的父亲或者祖先来处理。这样,只需要一个事件处理程序,就可以管理某一类型的所有事件。
如果按需为document对象添加一个事件处理程序,用以处理页面上的某种特定类型的事件。具有以下优点:
1. document对象是内置的很快就可以访问,而且可以在页面生命周期的任何时间点为它添加事件处理程序(无需等待DOMContentLoaded或load事件)。换句话说,只要可单击的元素呈现在页面上,就可以具备适当的功能。
2. 在页面中设置事件处理程序所需的时间更少。如果只添加一个事件处理程序那所需的DOM引用更少,所花的时间也更少。
3. 占用内存少,提升整体性能。
通过事件委托添加的事件处理程序,该事件处理程序对于动态添加的子元素(前提是绑定了该种事件)同样有效。例如下面,通过for循环添加的事件处理程序,对于动态添加的子元素无效。如果点击新添加的li元素控制台不会弹出内容。
<button>添加一个新元素</button>
<ul>
<li>aaaaa</li>
<li>bbbbbbbbbb</lic>
<li>ccccccccccc</li>
<li>ddddddddddd</li>
<li>eeeeeeeeeee</li>
<li>fffff</li>
</ul>
<script type="text/javascript">
var btn = document.querySelector("button");
var oUl = document.querySelector("ul");
btn.onclick = function() {
var ele = document.createElement("li");
ele.innerHTML = "我是动态添加的";
oUl.appendChild(ele);
}
var lis = oUl.children;
/*for (var i=0,len=lis.length; i<len; i++) {
// 后面新添加的元素无效
lis[i].onclick = function() {
console.log(this.innerHTML);
}
}*/
// 事件委托
oUl.onclick = function(e) {
var e = e || event;
var target = e.target || e.srcElement;
console.log(target.innerHTML);
}
</script>