首页 > 代码库 > jQuery事件详解
jQuery事件详解
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。本文将分析一下他们的区别。
bind(type,[data],function(eventObject))
type:事件类型,如click、change、mouseover等;
data:传入监听函数的参数,通过event.data取到。可选;
function:监听函数,可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别。
bind: function( types, data, fn ) { return this.on( types, null, data, fn );
bind为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数,可以看到内部是调用了on()方法。对应的有unbind(),移除被选元素的click事件处理程序。
unbind: function( types, fn ) { return this.off( types, null, fn ); }
可以看到调用了off方法。
delegate(selector,type,[data],fn)
delegate: function( selector, types, data, fn ) { return this.on( types, selector, data, fn ); }
对应的有undelegate
undelegate: function( selector, types, fn ) { return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn ); }
用来指定触发事件的目标元素,监听器将被绑定在调用此方法的元素上,这个方法多了一个selector,selector传给了on(),这里就可以使用事件委托了
one(event,data,function)
该方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。
当使用 one() 方法时,每个元素只能运行一次事件处理器函数。
on(type,[selector],[data],fn)
在on的内部调用了event.add方法,用来添加事件监听
return this.each( function() { jQuery.event.add( this, types, fn, data, selector ); })
对应的off()用来解除绑定
自定义事件
在我看Bootstrap.js源码的时候,看到以下这样的代码
var e = $.Event(‘show.bs.modal‘, { relatedTarget: _relatedTarget }); this.$element.trigger(e)
jQuery.Event 构造函数 是暴露的并且可以调用trigger时使用。 new运算符是可选的。
当相应的事件发生时,任何通过.on()或一个快捷方法绑定的事件处理程序将被触发。但是,它们可以用.trigger()方法手动触发。调用 .trigger() 执行处理程序和用户自然的触发该事件,他们的执行顺序时相同的。若要触发通过 jQuery 绑定的事件处理函数,而不触发原生的事件,使用.triggerHandler() 来代替,trigger和triggerHandler的区别在于,trigger方法触发的事件会顺着DOM树向上冒泡,而triggerHandler方法只是调用该元素上对应的事件函数,不会冒泡。
$(‘#foo‘).on(‘custom‘, function(event, param1, param2) { alert(param1 + "\n" + param2); }); $(‘#foo‘).trigger(‘custom‘, [‘Custom‘, ‘Event‘]);
事件对象始终是被传递到事件处理程序的第一个参数,但如果指定了额外的参数调用.trigger() 时,这些参数将被传递给处理程序。要传递多个参数,使用一个数组,如下所示。从jQuery 1.6.2开始,可以通过一个单一的参数,而不使用一个数组。
自定义事件可以使事件回调函数和事件触发分离,使我们的代码更加整洁易读。
jQuery事件详解