javascript的内存和性能-事件委托&移除事件处理程序

每当事件处理程序指定元素时，将会影响整个页面的性能，原因一是每个处理函数都是对象，会占用更大的内存，原因二是dom访问次数增多，会延迟整个页面的访问时间。

处理方法：
1.事件委托
2.移除无用的事件处理程序

一、事件委托

“事件处理程序过多”的方法就是事件委托，原理是利用了事件冒泡，向高层的标签指定一个处理程序，就可以管理某一类的所有事件。

<ul id = "myul">
	<li id = "li1"> one </li>
	<li id = "li2"> two</li>
	<li id = "li3"> three </li>
</ul>
var list = document.getElementById("myul");
list.onclick = function(event) {
	var ev = event || window.event;
	var target = ev.target || ev.srcElement;
	switch (target.id) {
		case "li1":
			console.log("li1 had been clicked!");
			break;
		case "li2":
			console.log("li2 had been clicked!");
			break;
		case "li3":
			console.log("li3 had been clicked!");
			break;
	}
}

当标签<li>被点击之后，click事件会冒泡到ul之上，ul通过event.target判断是哪个<li>被点击，并且执行对应的代码。
此时target获得的是ul的dom树下的末梢节点标签，如果<li>标签不位于末梢节点，且又要监听<li>标签的click事件，那么仅需往上遍历末梢节点标签的父节点便可。

<ul id = "myul">
	<li id = "li1"> 
		//p是末梢节点标签
		<p>one</p>
	</li>
	<li id = "li2">
		//span是末梢节点标签
		<span>two</span>
	</li>
	//li是末梢节点标签
	<li id = "li3">
		three
	</li>
</ul>
var list = document.getElementById("myul");
list.onclick = function(event) {
	var ev = event || window.event;
	var target = ev.target || ev.srcElement;
	while (target !== list) {
		if (target.tageName === "li") {
			console.log(target.id + "has been find!")
			break;
		}
		target = target.parentNode;
	}
	switch (target.id) {
		case "li1":
			console.log("li1 had been clicked!");
			break;
		case "li2":
			console.log("li2 had been clicked!");
			break;
		case "li3":
			console.log("li3 had been clicked!");
			break;
	}
}

重点在于while语句，找到<li>标签，然后执行对应代码。

二、移除事件处理程序

有两种情况导致“空事件处理程序”增多
1、元素被删除，但是添加到元素中的事件处理程序未删除。
2、卸载页面时，未处理干净“事件处理程序”