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