美文网首页
bind、live、delegate、one、on区别

bind、live、delegate、one、on区别

作者: 琴先森的博客 | 来源:发表于2019-03-29 16:58 被阅读0次
    • bind()实现事件绑定,但无法动态绑定事件。1.7版本以前比较受推崇
    $('#foo').bind('mouseenter mouseleave',fn)
    $('button').bind({
      click:fn1,
      mouseover:fn2,
      mouseout:fn3,
    })
    $('input').unbind();  // 删除全部事件
    $('input').unbind('click');  // 删除所有的click事件
    $('input').unbind('click',fn2);  // 删除fn2事件
    
    • live()实现动态绑定事件,不支持连续调用。live()函数在1.9版本已经删除。
    $('.button').live('click',fn)    
    // fn事件其实是绑定在document上,从点击的button冒泡到document上
    
    • delegate(),通过祖先元素来代理委派后代元素的事件绑定问题。
    $('#list').delegate('li', 'click', 
    function() {
     //function code here.
    });
    //live()是通过document元素委派,而delegate()则可以是任意的祖先节点
    
    • on()可以实现事件委托和事件绑定
    // 委托
    $('父元素').on('click',子元素,fn) 
    $('父元素').off('click',子元素)
    // 绑定
    $('元素p').on('click',fn)
    $('元素p').one('click',fn)  // 只绑定一次
    $('元素p').off('click','元素p',fn)
    

    总结 :jquery推出on()的目的有2个,一是为了统一接口,二是为了提高性能,所以从现在开始用on()替换bind(),live(),delegate()吧。

    相关文章

      网友评论

          本文标题:bind、live、delegate、one、on区别

          本文链接:https://www.haomeiwen.com/subject/qywtbqtx.html