事件委托

事件委托，顾名思义，就是将本来要触发在A元素身上的事件，委托给B元素来触发，例如像onclick，onmouseover等事件都可以通过事件委托去触发。
事件委托实际上是通过事件冒泡的原理，将事件绑定在父元素或者祖先元素上，通过父元素或祖先元素触发相应的事件。
通过单纯的文字描述可能不太好理解，我们来通过代码去看看事件委托机制有哪些优点？

优点1-提高Javascript性能

使用事件委托机制绑定事件，可以减少内存的占用，从而提高事件处理速度。我们通过具体的实例来进行讲解。
我们要完成这样一个功能，页面上有一个列表，对每个列表元素进行点击，输出对应列表的值。

HTML代码

<ul id='list'>
    <li id='item1'>item1</li>
    <li id='item2'>item2</li>
    <li id='item3'>item3</li>
    <li id='item4'>item4</li>
    <li id='item5'>item5</li>
</ul>

传统的Javascript写法

如果采用原始的Javascript写法，有一种最笨的办法是通过id获取到每个li元素，然后在每个li元素上绑定onclick事件，这种方法由于会有很多重复代码，这么low的代码我们就不写在这里。
这里写一个更好一点的方法，通过标签名获取到类数组元素，然后通过循环给每个li元素绑定事件，这样就只需要出现一次绑定事件的代码。

window.onload = function () {
	var aUl = document.getElementById('list');
	var aLi = aUl.getElementsByTagName('li');

	for (var i = 0; i < aLi.length; i++) {
		aLi[i].onclick = function () {
			console.log(this.innerText);
		};
	}
};

通过上述的代码，在页面点击相应的li元素后，可以看到控制台输出相应的li元素值，达到我们的目的。
但是，我们试想这样一种情况，如果页面上li元素过多，这样一个个绑定事件的做法是不是会很耗性能？这里我们就可以采用事件委托机制来解决这个问题。

事件委托写法

上述HTML部分的代码不变，我们只需要修改Javascript部分的代码。我们来看看通过事件委托如何实现。

  1. 因为事件委托是将事件绑定在父元素上，因此我们首先需要获取到父元素ul。
  2. 在事件委托中，我们需要用到event对象，不管在哪个事件中都会存在event对象。
  3. 考虑到浏览器的兼容性，通过event对象的target或者srcElement属性获取冒泡过程中的元素。
  4. 进行判断是不是需要处理的元素，然后执行事件。

通过上述的分析，我们可以得到以下的代码。

window.onload = function () {
	var aUl = document.getElementById('list');
	var aLi = aUl.getElementsByTagName('li');

	aUl.onclick = function(ev) {
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;

		if (target.nodeName.toLowerCase() == 'li') {
			console.log(target.innerText);
		}
	};
};

通过上述的代码，我们发现同样可以达成我们的要求，而且这样的写法只需要在父元素上绑定事件，可以节省很大的内存空间，提高事件处理性能。

优点2

使用事件委托机制的第二个优点是，对于页面上新增的DOM元素，同样能够执行绑定的事件。而如果采用传统写法，新增的元素则不会具有绑定的事件。

传统写法

首先我们给页面添加一个button，点击button的时候会动态的添加一个li元素，并给予特定的值，然后点击新增的li元素，看控制台会不会输出相应的值。

window.onload = function () {
	var aUl = document.getElementById('list');
	var aLi = aUl.getElementsByTagName('li');
	var count = aLi.length;
	var btn = document.getElementById('btn');

	// button绑定新增事件
	btn.onclick = function () {
		var newLi = document.createElement('li');
		newLi.innerText = 'item' + ++count;
		aUl.appendChild(newLi);
	}

	for (var i = 0; i < aLi.length; i++) {
		aLi[i].onclick = function () {
			console.log(this.innerText);
		};
	}
};

通过传统的写法，在点击button元素后会自动添加子li元素，但是通过点击新增的li元素，我们发现在控制台并不会输出相应的元素值。
这就是采用传统写法的一个弊端，同样我们可以采取事件委托机制来解决这个问题。

事件委托写法

使用事件委托的写法，对于元素上绑定输出事件的代码不需要进行修改，只需要新增一个button元素事件即可，代码如下所示。

window.onload = function () {
	var aUl = document.getElementById('list');
	var aLi = aUl.getElementsByTagName('li');
	var count = aLi.length;
	var btn = document.getElementById('btn');

	// button绑定新增事件
	btn.onclick = function () {
		var newLi = document.createElement('li');
		newLi.innerText = 'item' + ++count;
		aUl.appendChild(newLi);
	}

	aUl.onclick = function(ev) {
		var ev = ev || window.event;
		var target = ev.target || ev.srcElement;

		if (target.nodeName.toLowerCase() == 'li') {
			console.log(target.innerText);
		}
	};
};

通过上述写法，在点击button元素后，页面上会新增li元素，而且点击新增的li元素，控制台会输出相应的li元素值，完美解决了传统写法的问题。