事件委托是利用事件冒泡，只指定一个事件处理程序来管理某一类型的所有事件。

为什么要用事件委托？

1.在JavaScript中添加到页面上的事件处理程序的个数直接关系到页面的整体运行性能。为什么呢？因为，每个事件处理函数都是对象，对象会占用内存，内存中的对象越多，性能就越差。此外，必须事先指定所有的事件处理程序而导致的DOM访问次数，会延迟整个页面的交互就绪时间。

2.对有很多个数据的表格以及很长的列表逐个添加事件，简直就是噩梦。所以事件委托，能极大地提高页面的运行性能，减少开发人员的工作量。

例如一个列表

<ul id = "lists">
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
    <li>列表6</li>
</ul>

我们通过ajax动态加载li列表，那么这个时候我们直接在li中去绑定事件，由于windows对象加载以后先列出来的6条列表绑定的事件都能够正常执行，然后后面动态加载的li列表不能执行事件，这个时候就需要我们使用到事件委托

var lists = document.getElementById("lists");
lists.addEventListener("click",function(event){
	var target = event.target;
	//防止父元素ul也触发事件
	if(target.nodeName == "LI"){
		target.style.backgroundColor = "red";
	}
})

jQuery中的事件委托方式比较丰富，有很多方法可以用来处理这种例子

用on方法来绑定

$(function(){
	$("#lists").on("click","li",function(event){
		var target = $(event.target);
		target.css("background-color","red");
	})
})

用delegate方法来绑定

$(function(){
	$("#lists").delegate("li","click",function(event){
		var target = $(event.target);
		target.css("background-color","red");
	})
})

on()方法和delegate（）方法对于事件委托的写法很像。并且执行事件委托的时候只有子元素（本文中的li）会触发事件，而代为执行的父元素（本文中为ul）不会触发事件，所以我们不需要盘判断触发事件的元素节点名，这一点明显优于原生的JavaScript

用bind()方法来绑定

$(function(){
	$("#lists").bind("click","li",function(event){
		var target = $(event.target);
		if(target.prop("nodeName")=="LI"){
		target.css("background-color","red");}
	})
})

bind()方法同原生的JavaScript实现方法一样，当父元素代子元素执行事件时，父元素也会触发事件，所以我们需要判断一下触发事件的元素名。此外，用bind()方法给元素绑定事件的时候要注意，它只能给已经存在DOM元素添加事件，不能给未来存在DOM

由于jq1.7以后不再支持live，delegate方法，所以我们建议还是使用on方法来绑定需要委托的事件