• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

jquery中on和bind之间有什么区别?

jquery 搞代码 4年前 (2021-12-27) 37次浏览 已收录 0个评论

bind和on都是事件绑定,都是给元素绑定事件用的。那么on和bind之间有什么区别?下面本篇文章就来给大家介绍一下jquery中on和bind的区别,希望对大家有所帮助。

bind方法与on方法都是事件绑定,但是两者却又有着一个大区别:事件冒泡(事件代理);

jquery文档中bind和on函数绑定事件的用法:

.bind(events [,eventData], handler)
.on(ev<i style="color:transparent">来源gaodai$ma#com搞$代*码网</i>ents [,selector]  [,data], handler)

从文档中可以看出,.on方法比.bind方法多一个参数'selector',也就是子类选择器,用于规定只能添加到指定的子元素上的事件处理程序。

由于javascript的事件冒泡特性,如果我们在父元素上注册了一个事件处理函数,当子元素上发生这个事件的时候,父元素上的事件处理函数也会被触发。如果使用on的时候,不设置selector,那么on与bind就没有区别了。

.on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:

$('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定click事件;

那么这个selector参数的好处是什么?

好处在于.on方法

原理是事件冒泡,进行事件委托,子元素把事件委托给父元素进行事件处理;

这样的好处

  1. 万一子元素非常多,给每个子元素都添加一个事件,会影响到性能;

  2. 为动态添加的元素也能绑上指定事件;

如:

$('ul li').on('click', function(){console.log('click');})的绑定方式和$('ul li').bind('click', function(){console.log('click');})一样;

我通过js给ul添加了一个li:$('ul').append('<li>js new li<li>');');这个新加的li是不会被绑上click事件的

但是我用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件

更多jQuery相关技术文章,请访问 jQuery答疑 栏目进行学习!!

以上就是jquery中on和bind之间有什么区别?的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:jquery中on和bind之间有什么区别?

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址