`
zhouyrt
  • 浏览: 1158897 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

读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代理事件的绑定

 

 

如图

 

以下是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元素示例)

 

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

 

 

  • 大小: 12.3 KB
  • 大小: 4.1 KB
分享到:
评论

相关推荐

    读jQuery之十 事件模块概述

    虽然事件模块代码很难读,但其提供的API接口还是很清晰的。如下 1 添加事件(bind/one/live/delegate/hover/toggle) bind 基本的添加事件函数。 one 添加只执行一次的事件函数。 live 事件代理(使用document代理)...

    jQuery1.7压缩和未压缩版

    2. **事件代理优化**:jQuery1.7改进了事件委托的性能,使得在大型DOM树中使用事件代理更加高效。这在处理动态生成的元素时特别有用,因为只需要在父元素上绑定一次事件处理函数即可。 3. **`.data()`方法的改进**...

    JQuery-1.7.1(含vsdoc)

    - **事件代理(Event Delegation)**:利用`.on()`方法,可以更高效地处理动态生成元素的事件,减少了内存占用和事件绑定。 - **$.ajax()** 的增强:包括更好的跨域支持、自定义缓存控制以及JSONP处理,使得AJAX...

    jQuery开发技术详解

    例如,避免过多的DOM操作,合理使用缓存,以及适时地使用事件代理,都是jQuery开发中的最佳实践。 ### 10. 实战案例分析 通过实际的网页项目,我们可以学习如何将以上知识点应用于实际开发中,解决具体问题,提升...

    jquery的设计流程参考

    jQuery的核心设计理念是“Write Less, Do More”,它通过封装复杂的DOM操作、事件处理和动画效果,使JavaScript代码更加简洁易读。其主要目标是提供一个统一的、高效的跨浏览器解决方案,简化HTML文档遍历、事件处理...

    artech-javascript-jquery-14

    5. **事件冒泡与事件委托**:jQuery 14支持事件冒泡和事件委托,通过`event.stopPropagation()`阻止事件向上冒泡,而事件委托则利用`$(parent).on(event, selector, handler)`来处理子元素的事件。 三、jQuery动画 ...

    JQuery技巧(基础)

    6. **事件委托**:使用`.on()`的事件代理功能,可以为动态添加的元素绑定事件,如`$("#container").on("click", ".child", function() {...})`。 ### 四、示例应用 以下是一段使用jQuery实现元素隐藏和显示的代码...

    jQuery淡入淡出多级下拉动画菜单.rar

    9. **代码优化**:为了保证性能,开发者需要优化jQuery代码,避免不必要的DOM操作,合理使用事件代理,并确保动画的执行效率。 10. **可扩展性与可维护性**:这个特效代码允许二次修改,意味着它的结构应该是清晰的...

    jquery-1.7.1(普通版、min版,1.4API中文帮助)

    - **事件(Events)**:优化了事件处理机制,增强了事件代理和性能。 - **插件兼容性(Plugin Compatibility)**:确保了与现有jQuery插件的兼容性,降低了升级风险。 ### 5. 学习与应用 - 开发者可以结合jQueryAPI...

    jQuery.in.Action.2nd.Edition

    3. **事件处理**:深入探讨了如何使用jQuery来绑定和触发各种事件,如点击、鼠标悬停等,并介绍了如何使用事件代理模式来提高代码效率。 4. **动画与效果**:通过实例展示了jQuery内置的各种动画效果和自定义动画...

    jQuery实现的图片左右滑动鼠标悬停放大效果源码.zip

    例如,使用`.on()`方法替代`.live()`或`.bind()`,以及使用事件代理可以提高效率。 综上所述,这个压缩包中的源码展示了如何利用jQuery来构建一个交互式的图片展示功能,包括图片轮播、鼠标悬停放大和可能的触摸...

    jQuery图片整张或局部放大代码.zip

    使用jQuery,我们可以编写更简洁、更易读的代码来实现复杂的效果。 在图片放大效果中,有两类常见的实现方式:整张图片放大和局部放大。整张图片放大通常是在用户点击图片后,将图片以新的尺寸显示,保持原有的宽高...

    jquery select text

    避免不必要的DOM操作,使用`$(document).ready()`确保DOM加载完成后再执行相关代码,以及使用事件代理等方法可以提高性能。 通过以上讨论,你应该对在jQuery中选择和操作文本有了更全面的了解。实践是检验真理的...

    jQuery-Handling-Events

    在JavaScript的世界里,jQuery是一个非常...综上所述,jQuery的事件处理机制极大地提高了开发效率,让JavaScript代码更加简洁易读。通过熟练掌握这些知识点,你可以更好地利用jQuery来创建响应式和交互丰富的Web应用。

    alexeev:jQuery组合

    9. **性能优化**:jQuery提供了一些工具和策略来优化性能,如使用`.delegate()`或`.on()`进行事件代理,以及利用`$(document).ready()`确保DOM加载完毕后再执行脚本。 10. **版本更新与选择**:jQuery有多个版本,...

    啤酒代理商网站模板是一款啤酒生产销售企业HTML网站模板下载。_html网站模板_网页源码移动端前端_H5模板_自适应.rar

    jQuery或类似的库可能被用作JavaScript的简化工具,提供简便的DOM操作、事件处理和动画效果。另外,考虑到模板的H5标签,这里也可能使用了HTML5的新特性,如Web存储(localStorage或sessionStorage)、WebSocket等,...

Global site tag (gtag.js) - Google Analytics