关于 on()方法

自 Jquery1.7 起，on()方法是 bind()、live()、delegate() 方法的新的替代品。

但这不并意味着其他处理事件绑定的方法没有意义，实际开发过程中可以依照场景选择某些方法。

bind()方法

bind()方法将事件类型和一个事件处理函数直接注册到了被选中的 DOM 元素中。

当使用它来连接事件处理函数时,它仍然非常简洁,但是也存在着一些性能方面的问题

//bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 
//常见的click()方法是bind()方法的简写
$("#add").bind("click",function(e){}); 
//等效
$("#add").click(function(e){});
​

优点:

• 适用于各种浏览器
• 连接事件处理函数非常方便快捷
• 可以使用.click()、.hover()等简写方法来更方面地连接事件处理函数
• 对于简单的 ID 选择器，使用 bind()方法可以很快地连接事件处理函数，而且当事件被触发时，事件处理函数几乎是马上就被调用了

缺点:

• 当匹配多个元素时，会将所有的事件处理函数附加到所有匹配的元素
• 不可以动态地匹配相同选择器的元素
• 操作大量匹配的元素时会有性能方面的问题
• 附加操作是在前期完成的,这可能导致页面加载时存在性能问题

live()方法

live()方法在使用时与 bind()方法一致，但在实际处理时，存在一个委托机制。

方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即 document）。

通过将事件信息注册到 document 上，这个事件处理函数将允许所有冒泡到 document 的事件调用它。

一旦有一个事件冒泡到 document 元素上，Jquery 会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用。

这个工作在用户交互时对性能方面造成一定的影响，但是初始化注册事件的过程相当地快。

$("#add").live("click",function(e){}); 
​

优点:

• 所有事件处理函数都只注册一次，不像 bind()那样进行多次注册
• 将 bind()方法升级到 live()方法非常方便，你仅需要将"bind"替代为"live"
• 动态添加到 DOM 的元素也将被神奇的匹配到，真实的事件信息是被注册到 document 元素上的
• 可以在文档加载完之前连接事件处理函数，这样可以更好地利用时间

缺点:

• Jquery1.7 以后的版本被弃用，应该在代码里逐步放弃使用它
• 使用这个方法时链式操作没有得到正确的支持，可能会出错
• 所做的匹配操作基本上没用，因为它只用于在 document 元素上注册事件处理函数
• 使用 event.stopPropogation()方法将会没用，事件已经被委托到了 document
• 所有的选择器或者事件信息都被附加到 document 元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery 会在一大堆储存的元数据中使用 matchesSelector 方法来决定哪一个事件处理函数将会被调用
• 所连接的事件总是被委托到 document 上，所如果你的 DOM 的层级很深的话，会导致一定的性能问题

delegate()方法

delegate()方法与 live()方式实现方式相类似，但不是将选择器或者事件信息附加到 document，而是让你指定附加的元素
与 live()方法类似的地方在于，这个方法也是使用事件委托来完成

//#add将作为根元素进行事件委托
$("#add").delegate("a","click",function(e){});
​

优点:

• 可以选择将选择器或者事件信息附加到指定的元素
• 匹配操作实际上在前面并没有执行，而是用来注册到指定的元素
• 链式操作可以得到正确的支持
• Jquery 仍然需要迭代这些选择器或者事件信息来匹配元素，不过选择的元素作为根元素，所以筛选的量会大幅减少
• 使用了事件委托机制，可以匹配到被动态地添加到 DOM 的元素
• 可以在文档加载完之前连接事件处理函数

缺点:

• bind()方法不可以直接升级到 delegate()方法
• Jquery 仍然需要使用 marchesSelector 方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用
• 当操作大量匹配的元素时会有性能方面的问题

on()方法

在 Jquery1.7 版本后 bind()、live()和 delegate()方法只需要使用 on()方法一种方式来调用它们

//基本实例
$("p").on("click",function(e){});
​

优点:

• 使各种事件绑定方法一致
• 在 Jquery 源码中 bind()、live()、delegate()方法实际上是调用了此方法，简化了 jQuery 代码库并删除了一级重定向
• 提供了使用 delegate()方法的优点，并且仍然提供对 bind()方法的支持

缺点:

• 给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变

小结

1. 减少使用 bind()方法，因为它把同一个事件处理函数附加到了每一个匹配的元素上
2. 停用 live()方法，因为它已经被弃用了同时也会带来很多问题
3. delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理
4. on()方法其实就是模拟 bind()、live()、delegate()实现的语法糖，具体取决于你如何调用它
5. 尽量使用新的 on()方法，尤其在 Jquery1.7 版本后尽情使用该方法！