一文带你了解事件代理

前言

由于事件处理程序可以为 WEB 应用程序提供交互能力，许多开发会不分青红皂白的像页面中添加大量的处理程序。在 JS 中，添加到页面上的处理事件的数量直接关系到页面的整体运行性能。那么我们该采用哪种技术方式提升性能呢？

事件委托

对”事件处理程序过多”的问题解决方案就是事件委托。事件委托利用了冒泡机制，指定一个事件处理程序，就可以管理某一类型的所有数据。

通俗点来说，就是把一个元素的处理事件，委托给另外一个dom元素。

一般情况下，我们会委托给父级元素或者更外层元素，真正绑定事件的也是外层元素。我们可以为整个页面指定一个onlick事件的处理程序，而不必给每个点击的元素添加点击事件，以下面的 HTML代码为例：

<ul>
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
</ul>

其中，这 3 个 li 被单击后会执行后续操作，按照传统做法，我们需要给这 3 个li添加点击事件。

var item1 = document.getElementById('item1');
var item2 = document.getElementById('item2');
var item3 = document.getElementById('item3');

item1.addEventListener('click', function () {
	console.log('1');
});
item2.addEventListener('click', function () {
	console.log('2');
});
item3.addEventListener('click', function () {
	console.log('3');
});

在复杂的 WEB 项目中，对所有可以点击的元素添加事件，那么就会存在数不清的点击事件。使用事件委托的话，我们可以在需要处理的DOM的最外层添加点击事件。如下面的例子。

<ul id="item-list">
	<li id="item1">1</li>
	<li id="item2">2</li>
	<li id="item3">3</li>
</ul>

var itemList = document.getElementById('item-list');
itemList.addEventListener('click', function (e) {
	switch(e.target.id) {
		case 'item1':
			console.log('1');
			break;
		case 'item2':
			console.log('2');
			break
		case 'item3':
			console.log('3');
			break				
	}
});