读懂jquery事件代理

青旅半醒 2022-07-15 12:10 182阅读 0赞

## [读jQuery之十六（事件代理）][jQuery] ##

事件代理的实现原理很简单：利用浏览器中事件的冒泡（event bubbling）和事件源（target || srcElement）。

某些场景中特别适合使用事件代理，它有如下好处

1.  需要管理的handler更少。
2.  占用的内存更少（创建的驻留在内存中的handler少了）。
3.  DOM元素与代码更少的绑定。
4.  DOM变更后（如添加dom节点）无须重新绑定事件处理器。

它也有如下不足

1.  并非所有的事件都能冒泡，如load, change, submit, focus, blur(jQuery间接的实现了focus和blur的事件代理)。
2.  代理元素的handler管理复杂。
3.  不好模拟用户触发事件（jQuery实现了）。

很多开源框架中都加入了事件代理API，比如yui、sencha touch、gaea等。jQuery的事件代理提供给客户端程序员的有以下几个函数

*  **.live** 使用document对象代理事件
 *  **.delegate** 根据选择器指定特定的元素代理事件
 *  **.die** 解除使用live代理事件的绑定
 *  **.undelegate** 解除使用delegate代理事件的绑定

如图

![2011082310051290.png][]

以下是delegate的代码

delegate: function( selector, types, data, fn ) {
        return this.live( types, data, fn, selector );
    },

可以看到它依赖于live，实际上live的第四个参数是专门给delegate用的。并不提供给客户端程序员。live和die一个each调用就生成了这两个方法。

jQuery.each(["live", "die"], function( i, name ) {
        jQuery.fn[ name ] = function( types, data, fn, origSelector /* Internal Use Only */ ) {
            var type, i = 0, match, namespaces, preType,
                selector = origSelector || this.selector,
                context = origSelector ? this : jQuery( this.context );
                    ...
        };
    });

即生成的live和die方法都具有四个参数分别是types, data, fn, origSelector。

types  事件类型，如“click”

data   是数据（js对象），可以在回调函数中通过事件对象获取到。

fn      事件handler

origSelector  css选择器，字符串如“\#id”

这里比较奇怪的是第二个参数，因为多数时候第二个参数我们传的是函数类型。如下

$('#id').live('click', function(){
    
    });

live内部做了调换，如

if ( data === false || jQuery.isFunction( data ) ) {
        fn = data || returnFalse;
        data = undefined;
    }

如果第二个参数data为false将使用returnFalse，returnFalse在之前系列中提到过，是一个函数，里面仅一句：返回false。

如果data本身就是function类型的，那么将把data赋值给fn。既然第二个参数本意就是函数，干嘛那么费劲将第二个参数与第三个参数调换呢。不如定义时直接换了，如

jQuery.fn[ name ] = function( types, fn, data, origSelector /* Internal Use Only */ )

这是遗留问题，后续jQuery版本为了与之前版本参数保持一致。

接着说第四个参数origSelector，这个参数只提供给jQuery库内部使用。简单说它是用来实现delegate方法的。live使用document对象做代理，delegate则可以使用指定的元素做代理。这里的origSelector就是指定元素的选择器。

live这段代码

if ( type === "hover" ) {
        types.push( "mouseenter" + namespaces, "mouseleave" + namespaces );
        continue;
    }

这是jQuery自己加的事件，即可以如下使用

$('#id').live("hover", fn);

这个需结合liveHandler来看，liveHandler中对mouseenter/mouseleave单独做了处理。

再看看使用live时其内部流程是如何的

1. live中调用 jQuery.event.add，此时第二个参数是以字符串”live”开头的。会将data，selector，fn等置入第三个参数。

jQuery.event.add( context[j], "live." + liveConvert( type, selector ),
    
        { data: data, selector: selector, handler: fn, origType: type, origHandler: fn, preType: preType } );

2. 进入到jQuery.event.add后，会进入到这一句

special.add.call( elem, handleObj );

special.add 如下

add: function( handleObj ) {
    
        jQuery.event.add( this,
    
            liveConvert( handleObj.origType, handleObj.selector ),
    
            jQuery.extend({}, handleObj, {handler: liveHandler, guid: handleObj.handler.guid}) );
    
    },

会发现，又是调用jQuery.event.add，即一个递归调用。这是jQuery事件代理部分较难理解的一部分。

live的实现两次调用jQuery.event.add作用不同。第一次是往elemData.events中添加key为live的对象，第二次是添加key为真正的事件（如click）的对象。第二次的handler是私有的liveHandler。

两次调用后elemData.events 的结构如下（这里以点击事件，段落P元素示例）

![2011082411092828.png][]

即给代理元素（如document对象）添加的真正事件是click，但响应时会从live上取fn。知道了live存放数据的结构，那么die的实现就好理解了。

posted on 2011-09-02 11:48 [http://www.cnblogs.com/snandy/][http_www.cnblogs.com_snandy]‘>snandy 阅读(…) 评论(…) [编辑][Link 1] 收藏

刷新评论 刷新页面 返回顶部

fixPostBody(); setTimeout(function () \{ incrementViewCount(cb\_entryId); \}, 50); deliverAdT2(); deliverAdC1(); deliverAdC2(); loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb\_blogId, cb\_entryId, cb\_blogApp, cb\_blogUserGuid); GetPrevNextPost(cb\_entryId, cb\_blogId, cb\_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb\_blogId, cb\_blogApp, cb\_entryCreatedDate);

### 导航 ###

*  [博客园][Link 2]
 *  [首页][http_www.cnblogs.com_snandy]
 *  [联系][Link 3]
 *  
 *  [管理][Link 4]

<div id="blog-calendar" style="display:none"></div><script type="text/javascript">loadBlogDefaultCalendar();</script>

### 公告 ###

### 统计 ###

*  随笔 - 445
 *  文章 - 0
 *  评论 - 1874

var \_bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://"); document.write(unescape("%3Cscript src='" + \_bdhmProtocol + "hm.baidu.com/h.js%3F1628f7c8d025473b441a8ba490edd441' type='text/javascript'%3E%3C/script%3E")); setTimeout(function()\{ //$('a').last().remove() \}, 2000)

[jQuery]: http://www.cnblogs.com/snandy/archive/2011/09/02/2149707.html
[2011082310051290.png]: /images/20220715/a2d45ccd0fb048a89ad30ae270d5ec2b.png
[2011082411092828.png]: /images/20220715/10a99f18d4dc4ffc8f86490ba446a4cf.png
[http_www.cnblogs.com_snandy]: http://www.cnblogs.com/snandy/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=2149707
[Link 2]: http://www.cnblogs.com/
[Link 3]: https://msg.cnblogs.com/send/snandy
[Link 4]: https://i.cnblogs.com/