jquery中bind与on的区别

来源：互联网发布：java 开源oa系统编辑：程序博客网时间：2024/06/01 20:14

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

当我们想要使用事件委托的时候，我们想到的肯定是on方法。而不是bind方法，因为相比bind方法，on方法多了一个selector方法，也就是子类选择器

回到正题，事件委托怎么实现的？

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

举个例子：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.btn1 {width: 100px;height: 100px;background: #333;}.div1 {width: 200px;height: 200px;background: #999;}</style></head><body><div class="div1"><button class="btn1">btn1</button></div><script src="lib/jquery-2.1.1.min.js"></script><script>$(".div1").on("click", ".btn1", function() { console.log("aaaa"); });</script></body></html>

这是个最简单的委托事件，按钮将事件委托给了父亲节点---div，所以点击btn后我们触发的是按钮，委托的对象===div内部的事件就触发了，

事件委托有个很好的优点，就是不用多次去绑定一个事件，比如一个有着999条新闻的新闻列表，当我们绑定999次的时候，会耗费很多资源，而一次事件委托就足够了

阅读全文

1 0