最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊，什么时候该使用它们啊。下面本文将给大家详细介绍这四个方法之间的区别，分别对每个方法都进行了详细的介绍，话不多说，来一起看看详细的介绍：
在我们深入了解这些方法之前，我们先来一段常见的的HTML，作为我们编写jquery示例方法使用的样本。
<ul data-role="listview" data-filter="true"> <!-- ... 其他li ... --> <li> <a href="detail.html?id=10" > <h3>John Resig</h3> <p><strong>jQuery Core Lead</strong></p> <p>Boston, United States</p> </a> </li> <!-- ... 其他li ... --> </ul>
使用Bind方法
.bind()方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。这个方法被使用得最久,在此期间,它很好的解决了各种跨浏览器的问题。当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题,将在下面罗列出来。
/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 .click() 方法只是.bind() 方法的简写。 */ $( "#members li a" ).bind( "click", function( e ) {} ); $( "#members li a" ).click( function( e ) {} );
.bind()方法将会把事件处理函数连接到所有匹配的a标签。这种方式并不好。这样做的话，它不仅在所有匹配的元素中隐含地迭代附加事件处理函数，而且这些操作非常浪费（多余），因为这些相同的事件处理函数是被一遍一遍的重复的添加到所有匹配的标签上。
优点:
适用于各种浏览器
连接事件处理函数非常方便快捷
可以使用 .click() , .hover()等简写方法来更方面地连接事件处理函数
对于一个简单的ID选择器,使用.bind() 方法不仅可以很快地连接事件处理函数,而且当事件被触发时, 事件处理函数几乎是马上就被调用了
缺点:
这样方法会将所有的事件处理函数附加到所有匹配的元素
不可以动态地匹配相同选择器的元素
当操作大量匹配的元素时会有性能方面的问题
附加操作是在前期完成的,这可能导致页面加载时存在性能问题
使用Live方法
.live()方法使用了事件委托的概念来实施其所谓的“魔法”。你调用live()方法的方式就像是调用bind()方法那样方便。然而在这表面之下， .live()方法与前者的实现方式大不相同。 .live()方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。这个额外的工作将会在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。
/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） ( "#members li a" & "click" ) */ $( "#members li a" ).live( "click", function( e ) {} );
.bind()这个例子与上面bind()方法的例子对比的话有一个优点在于它仅仅把事件处理函数附加到document元素一次，而不是很多次。这样不仅更快，而且还减少了性能的浪费。然而，使用这个方法也会带来很多问题，下面将一一列出。
优点:
所有的事件处理函数都只会被注册一次，而不是像bind()那样进行多次注册
将bind()方法升级到live()方法非常方便，你仅需要将"bind"替代为"live"就可以了
那些被动态添加到DOM的元素也将被神奇的匹配到，因为真实的事件信息是被注册到document元素上的
你可以在文档加载完之前连接事件处理函数，这样可以帮助你更好地利用你可能没有用的时间
缺点:
这个方法在Jquery 1.7以后的版本被弃用了，你应该在你的代码里逐步放弃使用它
使用这个方法时链式操作没有得到正确的支持，可能会出现某些错误
所做的匹配操作基本上没用因为它只用于在document元素上注册事件处理函数
使用 event.stopPropogation() 方法将会没用，因为事件总是已经被委托到了document元素上
因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。
因为你所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，这会导致一定的性能问题
使用Delegate方法