文章目录
  1. 1. bind
    1. 1.1. 优点
    2. 1.2. 缺点
  2. 2. live
    1. 2.1. 优点
    2. 2.2. 缺点
  3. 3. delegate
    1. 3.1. 优点
    2. 3.2. 缺点
  4. 4. on
    1. 4.1. 优点
    2. 4.2. 缺点

在 jQuery的开发过程中,我们往往需要处理各种事件,例如,click(),hover()等。在jQuery的API中,我们可以使用不同的方法来将 这些事件绑定到特定的元素中。今天这篇文章中,我们将要介绍如何使用bind(),on(),live()和delegate()方法来绑定特定的事件, 什么情况下使用,什么情况下不适用它们。

bind

bind(type,[data],fn)

.bind()是最直接的绑定方法 ,会绑定事件类型和处理函数到DOM element上, 这个方法是存在最久的,而且也很好的解决了浏览器在事件处理中的兼容问题。但是这个方法有一些performance方面的问题。例如

$( "#members li a" ).bind( "click", function( e ) {} ); 

这里存在着一些效率方面的问题,一方面,我们隐式地把click handler加到所有的a标签上,这个过程是昂贵的;另一方面在执行的时候也是一种浪费,因为它们做了同一件事却被执行了一次又一次(比如我们可以把它hook到它们的父元素上,通过冒泡可以对它们中的每一个进行区分,然后再执行这个event handler)。

优点

  • 这个方法提供了一种在各种浏览器之间对事件处理的兼容性解决方案
  • 非常方便简单的绑定事件到元素上
  • .click(), .hover()…这些非常方便的事件绑定,都是bind的一种简化处理方式
  • 对于利用ID选出来的元素是非常好的,不仅仅是很快的可以hook上去(因为一个页面只有一个id),而且当事件发生时,handler可以立即被执行(相对于后面的live, delegate)实现方式

缺点

  • 它会绑定事件到所有的选出来的元素上
  • 它不会绑定到在它执行完后动态添加的那些元素上
  • 当元素很多时,会出现效率问题
  • 当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题

live

live(type,[data],fn)

.live()方法用到了事件委托的概念来处理事件的绑定。它和用.bind()来绑定事件是一样的。.live()方法会绑定相应的事件到你所选择的元素的根元素上,即是document元素上。那么所有通过冒泡上来的事件都可以用这个相同的handler来处理了。它的处理机制是这样的,一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用

优点

  • 这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的元素挨个绑定
  • 那些动态添加的elemtns依然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上
  • 你可以在document ready之前就可以绑定那些需要的事件

缺点

  • 从1.7开始已经不被推荐了
  • Chaining没有被正确的支持
  • 当使用event.stopPropagation()是没用的,因为都要到达document
  • 因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时,会非常慢
  • 当发生事件的元素在你的DOM树中很深的时候,会有performance问题

delegate

delegate(selector,[type],[data],fn) 

.delegate()有点像.live(),不同于.live()的地方在于,它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

优点

  • 可以选择把事件放到哪个元素上
  • chaining被正确的支持了
  • jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素
  • 可以用在动态添加的元素上

缺点

  • 需要查找那个那个元素上发生了那个事件了,尽管比document少很多了,不过,你还是得浪费时间来查找。

on

on(events,[selector],[data],fn) 

其实.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的

优点

  • 提供了一种统一绑定事件的方法
  • 仍然提供了.delegate()的优点,当然如果需要你也可以直接用.bind()

缺点

  • 也许会对你产生一些困扰,因为它隐藏了一前面我们所介绍的三种方法的细节。
文章目录
  1. 1. bind
    1. 1.1. 优点
    2. 1.2. 缺点
  2. 2. live
    1. 2.1. 优点
    2. 2.2. 缺点
  3. 3. delegate
    1. 3.1. 优点
    2. 3.2. 缺点
  4. 4. on
    1. 4.1. 优点
    2. 4.2. 缺点