bind和on的区别

最新推荐文章于 2023-04-14 21:00:07 发布

转载最新推荐文章于 2023-04-14 21:00:07 发布 · 162 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangqiao170/p/10790159.html

文章标签：

#javascript #ViewUI

bind方法与on方法都是事件绑定，但是两者却又有着一个大区别：事件委托

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

.bind(events [,eventData], handler)

.on(events [,selector] [,data], handler)

从文档中可以看出，.on方法比.bind方法多一个参数'selector'子类选择器；

事件委托就是子类的事情委托给父类的去做，而这就让我们想起了冒泡事件，是的，这的确是委托事件的原型，而我们的selector，则是判断是不是那个子元素触发的事件，如果不是，自然就忽略掉了；

好处

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

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

1比如一个有着1000条新闻的新闻列表，当我们绑定1000次的时候，会耗费很多资源，而一次事件委托就足够了；

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事件

转载于:https://www.cnblogs.com/wangqiao170/p/10790159.html