jQuery 事件之 on 方法绑定多个选择器、多个事件

Question

今天浏览 jQuery 的 deprecated 列表，发现 live() 和 die() 在里面了，赶紧看了一下，发现从 jQuery 1.7 开始，jQuery 引入了全新的事件绑定机制，on() 和 off() 两个函数统一处理事件绑定。因为在此之前有 bind()、live()、delegate() 等方法来处理事件绑定，jQuery 从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

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

• events：一个或多个用空格分隔的事件类型和可选的命名空间，如 click 或 keydown.myPlugin 。
• selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为 null 或省略，当它到达选定的元素，事件总是触发。
• data：当一个事件被触发时要传递 event.data 给事件处理函数。
• fn：该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回 false。

替换 bind()

当第二个参数 selector 为 null 时，on() 和 bind() 其实在用法上基本上没有任何区别了，所以我们可以认为 on() 只是比 bind() 多了一个可选的 selector 参数，所以 on() 可以非常方便的换掉 bind()

替换 live()

在 1.4 之前相信大家非常喜欢使用 live()，因为它可以把事件绑定到当前以及以后添加的元素上面，当然在 1.4 之后 delegate() 也可以做类似的事情了。live() 的原理很简单，它是通过 document 进行事件委派的，因此我们也可以使用 on() 通过将事件绑定到 document 来达到 live() 一样的效果。

live() 写法

$('#list li').live('click', '#list li', function() {
    //function code here.
});

on() 写法

$(document).on('click', '#list li', function() {
    //function code here.
});

这里的关键就是第二个参数 selector 在起作用了。它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。

替换 delegate()

delegate() 是 1.4 引入的，目的是通过祖先元素来代理委派后代元素的事件绑定问题，某种程度上和 live() 优点相似。只不过 live() 是通过 document 元素委派，而 delegate 则可以是任意的祖先节点。使用 on() 实现代理的写法和 delegate() 基本一致。

delegate() 的写法

$('#list').delegate('li', 'click', function() {
    //function code here.
});

on() 写法

$('#list').on('click', 'li', function() {
    //function code here.
});

貌似第一个和第二个参数的顺序颠倒了一下，别的基本一样。

总结

jQuery 推出 on() 的目的有 2 个，一是为了统一接口，二是为了提高性能，所以从现在开始用 on() 替换 bind()、live()、delegate 吧。尤其是不要再用 live() 了，因为它已经处于不推荐使用列表了，随时会被干掉。如果只绑定一次事件，那接着用 once() 吧，这个没有变化。