jQuery 1.9.1源码分析系列(十)事件系统之绑定事件


Posted in Javascript onNovember 19, 2015

事件绑定的方法有很多种,使用了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 );
},
undelegate: function( selector, types, fn ) {
 // ( namespace ) or ( selector, types [, fn] )
 return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
jQuery.fn.one( types[, selector[, data]], fn )

通过one()函数绑定的事件处理函数都是一次性的,只有首次触发事件时会执行该事件处理函数。触发之后,jQuery就会移除当前事件绑定。

比如$("#chua").one("click",fn);为#chua节点绑定一次性的click事件

$(document).one("click","#chua",fn);将#chua的click事件委托给document处理。源码

one: function( types, selector, data, fn ) {
  return this.on( types, selector, data, fn, 1 );
} 
jQuery.fn.trigger(type[, data])
jQuery.fn.triggerHandler(type[, data])

trigger触发jQuery对象所匹配的每一个元素对应type类型的事件。比如$("#chua").trigger("click");

triggeHandler只触发jQuery对象所匹配的元素中的第一个元素对应的type类型的事件,且不会触发事件的默认行为。

//立刻触发jQuery对象内所有元素的指定type的事件
trigger: function( type, data ) {
 return this.each(function() {
  jQuery.event.trigger( type, data, this );
 });
},
//立刻触发jQuery对象内第一个元素的指定type的事件,且不会触发事件(比如表单提交)的默认行为
triggerHandler: function( type, data ) {
 var elem = this[0];
 if ( elem ) {
  return jQuery.event.trigger( type, data, elem, true );
 }
}

上面分析了那么些个事件绑定,有么有发现他们都是使用.on方式绑定的?这也是为什么提倡统一使用on来绑定的原因(one方式除外)。

jQuery.fn.on( types[, selector[, data]], fn )

.on的事件绑定一半的代码都实在处理传递不同参数的处理,这也是jQuery的口号Write less, do more的代价吧。最终使用jQuery.event.add来绑定事件。

  jQuery.event.add绑定事件有几个比较关键的地方:

第一个,使用内部缓存来保存节点elem的事件信息

//获取缓存数据 


 elemData = jQuery._data( elem );



 ...



 



 //设置缓存数据
   if ( !(events = elemData.events) ) {
    events = elemData.events = {};
   }
   if ( !(eventHandle = elemData.handle) ) {
    eventHandle = elemData.handle = function( e ) {
     ...
    };
    //将elem作为handle函数的一个特征防止ie非本地事件引起的内存泄露
    eventHandle.elem = elem;
   }

第二个,设置绑定事件信息,特别是指定的选择器selector、响应处理handler、响应事件类型type、命名空间namespace

// handleObj:设置绑定事件信息。贯穿整个事件处理
  handleObj = jQuery.extend({
   type: type,
   origType: origType,
   data: data,
   handler: handler,
   guid: handler.guid,
   selector: selector,
   // For use in libraries implementing .is(). We use this for POS matching in `select`
   //"needsContext": new RegExp( "^" + whitespace + "*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\(" +
   //whitespace + "*((?:-\\d)?\\d*)" + whitespace + "*\\)|)(?=[^-]|$)", "i" )
   //用来判断亲密关系
   needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
   namespace: namespaces.join(".")
  }, handleObjIn );

第三个,节点的事件列表中,真正的委托事件列表放置在前面,和delegateCount属性同步,即events.click.length假设为3,events.click.delegateCount假设为2。那么events.click[0]和events.click[1]所指定事件是委托事件。第三个events.click[2]对应的事件不是委托事件,而是节点自身的事件。

//将事件对象handleObj添加到元素的处理列表,委托事件放在前面,委托代理计数递增
  if ( selector ) {
   handlers.splice( handlers.delegateCount++, 0, handleObj );
  } else {
   handlers.push( handleObj );
  }

源码和添加事件后的结构上一章已经分析,详情请点击查看

绑定有一个公用函数jQuery.fn.on。解绑同样有一个公用函数jQuery.fn.off

jQuery.fn.off([ types[, selector][, fn]] )

这里的传参有个比较特殊的情况:当types是浏览器事件对象event的时候,表示要去掉(解绑)委托节点上event.selector指定的委托事件

//传入的参数是事件且绑定了处理函数
if ( types && types.preventDefault && types.handleObj ) {
  // ( event ) dispatched jQuery.Event
  handleObj = types.handleObj;
  //types.delegateTarget是事件托管对象
  jQuery( types.delegateTarget ).off(
   //组合jQuery识别的type
   handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
   handleObj.selector,
   handleObj.handler
   );
  return this;
}

无论如何最终都是调用jQuery.event.remove函数来解绑事件。

jQuery.fn.off完整的源码如下

off: function( types, selector, fn ) {
var handleObj, type;

//传入的参数是事件且绑定了处理函数

if ( types && types.preventDefault && types.handleObj ) {
  // ( event ) dispatched jQuery.Event
  handleObj = types.handleObj;
  //types.delegateTarget是事件托管对象
  jQuery( types.delegateTarget ).off(
   //组合jQuery识别的type
   handleObj.namespace ? handleObj.origType + "." + handleObj.namespace : handleObj.origType,
   handleObj.selector,
   handleObj.handler
   );
  return this;

}

if ( typeof types === "object" ) {
  // ( types-object [, selector] )
  for ( type in types ) {
   this.off( type, selector, types[ type ] );
  }
  return this;

}

if ( selector === false || typeof selector === "function" ) {
  // ( types [, fn] )
  fn = selector;
  selector = undefined;

}

if ( fn === false ) {
  fn = returnFalse;

}

return this.each(function() {
  jQuery.event.remove( this, types, fn, selector );

});
}

接下来分析一下事件解绑的低级api jQuery.event.remove。

jQuery.event.remove

jQuery使用.off()函数伤处绑定的事件时内部调用的基础函数是jQuery.event.remove。该函数的处理流程如下

1. 分解传入的要删除的事件类型types,遍历类型,如果要删除的事件没有事件名,只有命名空间则表示删除该命名空间下所有绑定事件

//分解types为type.namespace为单位元素的数组
types = ( types || "" ).match( core_rnotwhite ) || [""];
t = types.length;
while ( t-- ) {
   tmp = rtypenamespace.exec( types[t] ) || [];
   type = origType = tmp[1];
   namespaces = ( tmp[2] || "" ).split( "." ).sort();

   //解绑当前元素的当前命名空间(types[ t ])上所有的事件
   if ( !type ) {
    for ( type in events ) {
     jQuery.event.remove( elem, type + types[ t ], handler, selector, true );
    }
    continue;
   }
   ...

2. 遍历类型过程中,删除匹配的事件,代理计数修正

type = ( selector ? special.delegateType : special.bindType ) || type;
handlers = events[ type ] || [];
tmp = tmp[2] && new RegExp( "(^|\\.)" + namespaces.join("\\.(?:.*\\.|)") + "(\\.|$)" );
//删除匹配事件
origCount = j = handlers.length;
while ( j-- ) {
   handleObj = handlers[ j ];

   //各种满足移除事件的条件才能移除
   if ( ( mappedTypes || origType === handleObj.origType ) &&
    ( !handler || handler.guid === handleObj.guid ) &&
    ( !tmp || tmp.test( handleObj.namespace ) ) &&
    ( !selector || selector === handleObj.selector || selector === "**" && handleObj.selector ) ) {
    handlers.splice( j, 1 ); 



if ( handleObj.selector ) {





handlers.delegateCount--;




}




if ( special.remove ) {





special.remove.call( elem, handleObj );




}
   }
}

3. 如果节点上指定类型的事件处理器已经为空,则将events上的该类型的事件处理对象移除

// 移除事件处理对象
// (移除特殊事件处理过程中避免潜在的无限递归,下一章会专门详解这种情况)
if ( origCount && !handlers.length ) {
//例如 var js_obj = document.createElement("div"); js_obj.onclick = function(){ …}
//上面的js_obj是一个DOM元素的引用,DOM元素它长期在网页当中,不会消失,而这个DOM元素的一属性onclick,又是内部的函数引用(闭包),而这个匿名函数又和js_obj之间有隐藏的关联(作用域链)所以形成了一个,循环引用.
if ( !special.teardown || special.teardown.call( elem, namespaces, elemData.handle ) === false ) {
jQuery.removeEvent( elem, type, elemData.handle );
}

delete events[ type ];
}

4. 如果节点上没有任何绑定的事件,则清空事件处理入口handle

if ( jQuery.isEmptyObject( events ) ) {
delete elemData.handle;

//removeData还检事件对象是否为空,所以使用它替代delete

jQuery._removeData( elem, "events" );
}

拓展: 浏览器事件删除jQuery.removeEvent

jQuery.removeEvent = document.removeEventListener ?
function( elem, type, handle ) {
   if ( elem.removeEventListener ) {
    elem.removeEventListener( type, handle, false );
   }
} :
function( elem, type, handle ) {
   var name = "on" + type;
   if ( elem.detachEvent ) {
    // #8545, #7054,避免自定义事件在IE6-8中的内存泄露
    // detachEvent需要传递第一个参数,不能是undefined的
    if ( typeof elem[ name ] === core_strundefined ) {
     elem[ name ] = null;
    }
    elem.detachEvent( name, handle );
   }
};

以上内容是小编给大家介绍的jQuery 1.9.1源码分析系列(十)事件系统之绑定事件,希望大家喜欢。

Javascript 相关文章推荐
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 Javascript
22点关于jquery性能优化的建议
May 28 Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
微信小程序实现签到弹窗动画
Sep 21 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 #Javascript
跟我学习javascript的作用域与作用域链
Nov 19 #Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 #Javascript
理解 JavaScript Scoping & Hoisting(二)
Nov 18 #Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
Nov 18 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 #Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 #Javascript
You might like
社区(php&&mysql)二
2006/10/09 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
分享php邮件管理器源码
2016/01/06 PHP
prototype 的说明 js类
2006/09/07 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
iframe实用操作锦集
2014/04/22 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
JS使用for循环遍历Table的所有单元格内容
2014/08/21 Javascript
javascript实现超炫的向上滑行菜单实例
2015/08/03 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Vue实现腾讯云点播视频上传功能的实现代码
2020/08/17 Javascript
[02:38]DOTA2 夜魇暗潮2020活动介绍官方视频
2020/11/04 DOTA
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Flask-Mail用法实例分析
2018/07/21 Python
Python定时任务随机时间执行的实现方法
2019/08/14 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
环保专业大学生职业规划设计
2014/01/10 职场文书
个人评语大全
2014/05/04 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫