jquery中bind与on的区别

74 阅读 0 评论 49 点赞

我是靠谱客的博主忐忑冥王星，这篇文章主要介绍jquery中bind与on的区别，现在分享给大家，希望可以做个参考。

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

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

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

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

举个例子：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>