事件委托：给多个元素和动态添加的元素绑定js事件，

这个标题描述有点不准确，准确点讲应该是“事件委托”

举个栗子，假如一个父容器里有一万个子元素，要给它们全部绑定事件，要怎么绑定呢？

很容易想到的就是遍历每个子元素，但这也太占内存资源了吧。

所以，“事件委托”就腾空出现啦

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。事件委托有一个很好的应用场景，就是你的HTML标签是动态添加的。事件的绑定是在文档载入时，JS渲染引擎渲染时就绑定完成的。如果后续你通过Ajax动态追加的元素是不会有绑定事件的。这个时候事件委托就发挥其功效了。

show the code

<ul id="ul">
	<li> 1 </li>
	<li> 2 </li>
	<li> 3 </li>
	<li> 4 </li>
	<li> 5 </li>
	<li> 6 </li>
	<li> 7 </li>
	<li> 8 </li>
	<li> 9 </li>
	<li> 0 </li>
</ul>
<input type="button" id="sub" value="新增元素" />

window.onload = function(){
	var ul = document.getElementById('ul'); // 绑定父级元素
	
	ul.onclick = function(e){ // 绑定事件，此处为绑定click事件
		e = window.event ? window.event :e; // 捕获事件
		var who = e.target ? e.target : e.secElement; // 捕获事件触发所在元素。此处用到了Event对象的target属性，
该属性能够获取事件发生所在的元素
		console.log(who.innerHTML); // 打印事件触发所在的元素的文本
		$(who).css('color','red'); // 修改样式
	}
}
$('#sub').click(function(){
	var length = $('#ul li').length;
	var list = '<li> ' + length + ' </li>';
	$('#ul').append(list);
})

当然，在实际应用时，我们很少自己写事件委托器，大部分都是用 jQuery的bind( ) 、on( )。

jQuery事件绑定 on()与bind()的区别