事件绑定的方法有很多种,使用了jquery那么原理那种绑定方式(elem.click = function(){…}))就不太想推荐给大家了。最主要的原因是elem.click=fn这种方式只能绑定一个事件处理,多次绑定的只会保留最后一次绑定的结果。
下面给大家介绍jquery绑定事件的方式有哪些吧。
jQuery.fn.eventType([[data,] fn])
比如eventType指的是事件类型,比如click: $(“#chua”).click(fn);
data这个参数一般都不会使用。这种方式事件绑定在(“#chua”)上,没有委托事件,和js原生的事件绑定更接近。我们看一下源码
jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
"mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
"change select submit keydown keypress keyup error contextmenu").split(" "), function( i, name ) {
//合并15种事件统一增加到jQuery.fn上,内部调用this.on / this.trigger
jQuery.fn[ name ] = function( data, fn ) {
return arguments.length > 0 ?
this.on( name, null, data, fn ) :
//如果不带参数表示立刻触发指定事件
this.trigger( name );
};
});
jQuery.fn.bind( types[, data], fn )比如$(“#chua”).bind(“click”,fn)。直接将事件绑定到$(“#chua”)上,没有委托事件。源码
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
}
jQuery.fn.delegate(selector, types[, data], fn)顾名思义delegate这个函数是用来做事件委托的,将选择器selector对应的响应处理委托给当前jQuery所匹配的元素。
比如:$(document).delegate(‘#big’,”click”,dohander);分析到这里顺便分析一下事件委托的处理流程。
当点击”#big”元素的时候,事件click会冒泡直到document节点;
document绑定了处理事件,这个处理事件会调用到事件分发器dispatch;
dispatch中取出对应事件类型click的所有的委托事件列表handlers;
根据事件源event.target过滤出委托事件列表handlers中每一个元素的selector属性对应的节点处于事件原和委托节点document之间(包括事件源)的委托事件,保存为handlerQueue;
执行handlerQueue里面的事件处理。
上面是一个大致的流程,后续会详细分析。先看delegate源码
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );










