jQuery绑定事件的四种基本方式

Query中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off。

 

bind(type,[data],function(eventObject))  live(type, [data], fn)  delegate(type,[selector],[data],fn) on(type,[selector],[data],fn)

bind是使用频率较高的一种，作用就是在选择到的元素上绑定特定事件类型的监听函数，参数的含义如下：

type:事件类型，如click、change、mouseover等;

data:传入监听函数的参数，通过event.data取到。可选;

function:监听函数，可传入event对象，这里的event是jQuery封装的event对象，与原生的event对象有区别，使用时需要注意。

bind的特点就是会把监听器绑定到目标元素上，有一个绑一个，在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“元素”，点击它是没有反应的，必须再bind一次才行。

 

live的参数和bind一样，源码：

live: function( types, data, fn ) {

jQuery( this.context ).on( types, this.selector, data, fn );

return this;

}

可以看到live方法并没有将监听器绑定到自己(this)身上，而是绑定到了this.context上了。

 

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

参数多了一个selector，用来指定触发事件的目标元素，监听器将被绑定在调用此方法的元素上。看看源码：

delegate: function( selector, types, data, fn ) {

return this.on( types, selector, data, fn );

}

又是调用了on，并且把selector传给了on。看来这个on真的是举足轻重的东西。

 

几种办法中使用on，因为其他方法都是内部调用on来完成的，直接使用on可以提高效率，而且完全可以用on来代替其他三种写法

参考原文：http://www.51edu.com/it/bckf/35687.html