jquery bind live delegate on

Posted 2020-08-01 spring

1.bind()

$(selector).bind(event,[data],function)

bind方法给每个$(selector)元素都注册一个事件处理函数，不支持未来增加的元素。上面两段代码等价的。

$(‘p‘).bind(‘click‘,function(){
    alert(‘p‘);
});

$(‘p").click(function(){
    alert(‘p‘);
});

 

2.live()

$(selector).live(event,[data],function)

live方法把事件处理函数绑定到document元素上，事件冒泡到document时，检查目标元素是否匹配selector.，并且是否是event事件，若这两个条件都满足，则执行事件处理函数。

$(‘p‘).live(‘click‘,function(){
    alert(‘p‘);
});

 

3.delegate()

$(selector).delegate(childSelector,event,[data],function)

delegate方法把事件处理函数绑定到$(selector)元素上，事件冒泡到$(selector)元素上时，检查目标元素是否匹配childSelector，并且是否event事件，若这两个条件都满足，则执行事件处理函数。

$(‘#container‘).delegate(‘p‘,click,function(){
    alert(‘p‘);
});

 

4.on()

$(selector).on(event,[childSelector],[data],function)

bind方法 live方法 delegate方法都是基于on方法实现的。若有childSelector，是给$(selector)中的元素的子元素添加事件处理函数，事件处理函数添加到$(selector)中的元素上，事件冒泡到$(selector)中的元素时，检测目标元素是否是匹配childSelector的元素，是否是event事件，若两者都是，执行function。若没有childSelector，事件处理函数function绑定到$(selector)中的元素。

//bind
$(‘p‘).bind(‘click‘,function(){
     alert(‘p‘);
});
$(‘p‘).click(function(){
     alert(‘p‘);
});
$(‘p‘).on(‘click‘,function(){
    alert(‘p‘);
});

//live
$(‘p‘).live(‘click‘,function(){
    alert(‘p‘);
});
$(document).on(‘click‘,‘p‘,function(){
    alert(‘p‘);
});

//delegate
$(‘#container‘).delegate(‘p‘,‘click‘,function(){
    alert(‘p‘);
});
$(‘#container‘).on(‘click‘,‘p‘,function(){
    alert(‘p‘);
});