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

原文地址:https://www.cnblogs.com/lxl0419/p/5779292.html