Discuz教程网

读jQuery之十一 添加事件核心方法

[复制链接]
authicon dly 发表于 2011-9-16 08:15:52 | 显示全部楼层 |阅读模式
这篇看看其源码,这个add定义如下(省略大部分)
  1. add: function( elem, types, handler, data ) {
  2. if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
  3. return;
  4. }
  5. ...
  6. }
复制代码

定义了四个参数elem、types、handler和data分别为HTMLElement、事件类型(如click)、事件响应函数、数据。此外,types 可以以空格分开传多种事件("mouseover mouseout")。handler 有时会是一个对象(实现live时)。data 最后会挂在扩充后的event对象上,即作为event的属性。而event会在handler作为第一个参数拿到,这样也就可以在handler拿到data了。
下面详细说明
  1. if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
  2. return;
  3. }
复制代码

文本和注释节点直接返回。
  1. if ( handler === false ) {
  2. handler = returnFalse;
  3. } else if ( !handler ) {
  4. // Fixes bug #7229. Fix recommended by jdalton
  5. return;
  6. }
复制代码

参数handler为false时,将handler赋值为returnFalse,returnFalse为一个函数,如下
  1. function returnFalse() {
  2. return false;
  3. }
复制代码

jQuery通过handler为false来阻止元素默认行为,停止事件冒泡。这个需要结合jQuery.event.handle看。
  1. var handleObjIn, handleObj;
  2. if ( handler.handler ) {
  3. handleObjIn = handler;
  4. handler = handleObjIn.handler;
  5. }
  6. // Make sure that the function being executed has a unique ID
  7. if ( !handler.guid ) {
  8. handler.guid = jQuery.guid++;
  9. }
复制代码

定义变量handleObjIn,handleObj。
handler从字面上看是事件响应(回调)函数,但这里出现handler.handler,让人倍感怪异。即什么时候会将handler当一个JS对象传入呢?
多数时候传的还是Function类型的,看看源码中jQuery.event.add的调用可发现jQuery在实现live的时候会传Object类型。如下
  1. add: function( handleObj ) {
  2. jQuery.event.add( this,
  3. liveConvert( handleObj.origType, handleObj.selector ),
  4. jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) );
  5. },
复制代码

这时会把handleObjIn赋值为所传的JS对象,真正的handler 却是handleObjIn.handler。这话有点绕,慢慢体会。
  1. // Make sure that the function being executed has a unique ID
  2. if ( !handler.guid ) {
  3. handler.guid = jQuery.guid++;
  4. }
复制代码

所传参数handler添加个属性guid,为一个数字,自增的从1开始。即使用jQuery添加事件,会为事件响应函数默认的添加了属性guid。这个guid再删除事件时会用到。
  1. // Init the element's event structure
  2. var elemData = jQuery._data( elem );
复制代码

先取elemData,这里使用了前面提到的jQuery._data。第一次为HTMLElement添加事件是elemData是个空对象({})。
  1. // If no elemData is found then we must be trying to bind to one of the
  2. // banned noData elements
  3. if ( !elemData ) {
  4. return;
  5. }
复制代码

elemData不存在则直接返回。
  1. var events = elemData.events,
  2. eventHandle = elemData.handle;
复制代码

定义events,eventHandle。同样第一次时这两个变量都是undefined。
  1. if ( !events ) {
  2. elemData.events = events = {};
  3. }
  4. if ( !eventHandle ) {
  5. elemData.handle = eventHandle = function( e ) {
  6. // Discard the second event of a jQuery.event.trigger() and
  7. // when an event is called after a page has unloaded
  8. return typeof jQuery !== "undefined" && (!e || jQuery.event.triggered !== e.type) ?
  9. jQuery.event.handle.apply( eventHandle.elem, arguments ) :
  10. undefined;
  11. };
  12. }
复制代码

给elemData.events和elemData.handle赋值。
  1. // Add elem as a property of the handle function
  2. // This is to prevent a memory leak with non-native events in IE.
  3. eventHandle.elem = elem;
复制代码

暂存elem到eventHandle,删除事件注册时会将其置null,避免部分浏览器中内存泄露。
  1. // Handle multiple events separated by a space
  2. // jQuery(...).bind("mouseover mouseout", fn);
  3. types = types.split(" ");
复制代码

将字符串以空格为切割符转成数组。这句使其可以一次添加多个事件,多个事件的handler是相同的。
后面是一个while循环
  1. while ( (type = types[ i++ ]) ) {
  2. handleObj = handleObjIn ?
  3. jQuery.extend({}, handleObjIn) :
  4. { handler: handler, data: data };
  5. ...
  6. }
复制代码

循环数组,里面依次处理如下
, 取得handleObj
, 处理事件命名空间,以点号(.)来区别。如果type有点号,则具有命名空间,否则没有
, 给handlerObj添加type,guid属性。这些后续删除事件时用到
, 取到handlers,special。多数情况下使用addEventListener/attachEvent来添加事件。从变量special可看出对于特殊的事件如ready,beforeunload及live事件是特殊处理的。 ready 调用的是jQuery.bindReady,而jQuery.bindReady内部调用的仍然是 addEventListener/attachEvent。beforeunload则是使用window.onbeforeunload来添加。live是实现事件代理的,他的处理也是特殊的。
, 最后吧handleObj添加到数组handles中。
jQuery.event.add 的最后一句,解决IE中内存泄露。
  1. // Nullify elem to prevent memory leaks in IE
  2. elem = null;
复制代码

jQuery事件管理的数据结构,我做了个图。如下

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x



上一篇:读jQuery之十二 删除事件核心方法
下一篇:仅Firefox中链接A无法实现模拟点击以触发其默认行为
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 06:52

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表