jQuery事件详解

Posted 2020-08-15

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开始，可以通过一个单一的参数，而不使用一个数组。
自定义事件可以使事件回调函数和事件触发分离，使我们的代码更加整洁易读。