事件委托

内存和性能

在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>