美文网首页
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