jQuery事件代理的应用

原创 2015年07月08日 17:43:16
参考自:http://www.cnblogs.com/snandy/archive/2011/09/02/2149707.html
事件代理的实现原理很简单:利用浏览器中事件的冒泡(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代理事件的绑定
 如图

 

以下是delegate的代码

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

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

1
2
3
4
5
6
7
8
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”

 

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

1
2
3
$('#id').live('click'function(){
 
});
live内部做了调换,如
1
2
3
4
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这段代码

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

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

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

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

 

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

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

1
2
3
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后,会进入到这一句
1
special.add.call( elem, handleObj );
special.add 如下
1
2
3
4
5
6
7
8
9
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元素示例)

 

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

jquery事件代理方法

之前写过原生js的事件代理,最近在用jquery写项目,自然少不了事件代理,所以今天就来写下jquery的事件代理: 例如下面的例子:用事件代理的方法给每个li都添加一个点击事件, HTML代码:...
  • qq_36545656
  • qq_36545656
  • 2016年11月24日 08:49
  • 981

JQuery中的事件委托机制:delegate和undelegate

delegate()还有一个非常重要的性质:使用delegate() 方法的事件处理程序适用于当前已经存在或未来新增的元素。那么delegate()是怎么做到的呢?很简单,利用javascript中的...
  • aitangyong
  • aitangyong
  • 2015年02月03日 22:43
  • 1769

jquery笔记(六):事件代理(委托)

http://www.cnblogs.com/wmmang-blog/archive/2013/03/13/2818092.html 在jQuery中,事件代理是指:把事件绑定到父级元素,然...
  • SalmonellaVaccine
  • SalmonellaVaccine
  • 2015年01月27日 00:49
  • 603

jquery的事件委托

111111 111111 $("ul").on("click","a",function(e){ console.log(e.currentTarget) }) 事...
  • THEANARKH
  • THEANARKH
  • 2016年04月23日 02:19
  • 4715

关于jquery的事件委托-bind,live,delegate,on的区别发展

事件委托:让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行! .bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。 jQuery 1.3新增的.liv...
  • yummy_go
  • yummy_go
  • 2016年02月15日 11:55
  • 1882

解释下事件代理

在传统的事件处理中,你按照需要为每一个元素添加或者是删除事件处理器。然而,事件处理器将有可能导致内存泄露或者是性能下降——你用得越多这种风险就越大。JavaScript事件代理则是一种简单的技巧,通过...
  • xujie_0311
  • xujie_0311
  • 2015年03月19日 16:04
  • 1801

jquery 事件代理

对 ee        ee ewew li进行点击,点击之后再添加10条li,那新添加的li没办法点击  ,,,这个是why呢   。。是因为没有用事件代理。点击的时候用on("clic...
  • zhangpengju123456
  • zhangpengju123456
  • 2015年07月09日 13:24
  • 270

关于JS事件冒泡与JS事件代理(事件委托)

事件作为DOM操作重要的一环,需要大家好好理解和运用,今天特意看了一下事件冒泡和事件代理的相关资料,感触颇深,也深感自己的无知不知道多浪费了多少内存,废话不多说进入正题: 1.事件冒泡:   ...
  • SuperCoooooder
  • SuperCoooooder
  • 2016年08月12日 16:26
  • 2551

jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]

随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面。jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现...
  • zc2087
  • zc2087
  • 2012年02月23日 15:38
  • 5680

javascript事件代理的简明理解

对于javascript事件代理的简明理解 关于事件代理,对于很多已经用过很多年的人来说,可能真的不知道原来自己 感觉是完全陌生的感念,今天有时间我自己也来写一下我自己对事件代理的理解。 用...
  • coder_daiwang
  • coder_daiwang
  • 2016年03月11日 18:10
  • 250
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery事件代理的应用
举报原因:
原因补充:

(最多只允许输入30个字)