开发者社区> 问答> 正文

关于jQuery中的bind on live的问题

问题描述
请问qjQuery中bind live onq的主要区别是什么?
什么场景下各自使用哪个函数?

展开
收起
小旋风柴进 2016-05-27 10:18:16 1851 0
1 条回答
写回答
取消 提交回答
  • 简单对比一下jQuery各个版本的live和bind函数实现方法:
    1.7版本前的live:

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

    1.7版本后的live:

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

    1.9版本中,更是取消了live函数,取而代之的是采用delegate。
    如果看看bind的实现的话,也能发现最终的代码如下:

    bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },

    发现了吧,都是on,bind和on是等价的。

    下面说一下delegate和bind(这里我们就当bind等于on好了)的区别,1个原则:

    对于已经存在的页面元素,用bind,对于“未来”存在的页面元素,用delegate
    似乎有点拗口,举个栗子:
    你有一个页面,里面有个按钮,现在要针对这个按钮绑定click事件,我们用bind还是delegate呢,我们用bind,因为按钮元素直接存在与页面中:

    $('#objId').bind('click', function() {});
    同样,你有一个页面,页面没有按钮,但是n秒后(或者某些操作后)会出现一个按钮,但我们希望页面初始化的时候就给按钮绑定click事件,这时候就用delegate即可;

    $(document).delegate('#objId', 'click', function() {});
    delegate是将事件注册到已经存在的document,当发生click事件时,只需要匹配#objId是否跟触发的对象一致,一致即执行函数。

    所以,从效率来说,bind占优,但在某些场合(特别是大量使用了Ajax的页面),delegate却不失为一种降低开发难度的办法。

    2019-07-17 19:17:11
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关课程

更多

相关电子书

更多
从 SDK 到编解码:视频直播架构解析 立即下载
《flutter live beijing》PPT分享 立即下载
视频直播架构解析 立即下载