JavaScript 事件委托

在谈到前端性能优化时，相信大家对其中一条优化策略有印象：“善于使用事件委托”。那么什么是事件委托？事件委托又是怎样提高前端性能的呢？

出现背景

由于事件处理程序可以为现代Web应用程序提供交互能力，因此许多开发人员不分青红皂白地向页面中添加大量的处理程序。在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

事件委托

对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，核心原理是：给父节点添加侦听器，利用事件冒泡影响每一个子节点。表现形式为：只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。看下面的例子：

<ul id="myLinks">
		<li id="goSomewhere">Go somewhere</li>
		<li id="doSomething">Do something</li>
		<li id="sayHi">Say hi</li>
</ul>

一个无序列表内部包含三个列表项，如果我们想为这三个列表项添加事件处理程序，传统的做法为：

var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
item1.addEventListener("click", function(e){
location.href = "https://www.baidu.com";
}, false);
item2.addEventListener("click", function(e){
document.title = "I changed the document's title";
}, false);
item3.addEventListener("click", function(e){
alert("hi");
}, false);

如果在一个复杂的Web应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序，如下面的例子所示：

var list = document.getElementById("myLinks");
myLinks.addEventListener("click", function(e){
	switch(e.target.id){
		case "goSomewhere":
			location.href = "https://www.baidu.com";
			break;
		case "doSomething":
			document.title = "I changed the document's title";
			break;
		case "sayHi":
			alert("hi");
			break;
	}
}, false);

在这段代码里，我们使用事件委托只为<ul>元素添加了一个onclick事件处理程序。由于所有列表项都是这个元素的子节点，而且它们的事件会冒泡，所以单击事件最终会被这个函数处理。我们知道，事件目标是被单击的列表项，故而可以通过检测id属性来决定采取适当的操作。与前面未使用事件委托的代码比一比，会发现这段代码的事前消耗更低，因为只取得了一个DOM元素，只添加了一个事件处理程序。虽然对用户来说最终的结果相同，但这种技术需要占用的内存更少。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术。