jquery中bind与on的区别

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次的时候,会耗费很多资源,而一次事件委托就足够了


  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值