浅谈事件委托（事件代理）和事件冒泡

最新推荐文章于 2024-06-10 17:00:16 发布

筱葭

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量4.2k

点赞数 1

分类专栏： JavaScript 文章标签：事件委托事件代理事件冒泡

本文链接：https://blog.csdn.net/zhouziyu2011/article/details/60955951

版权

JavaScript 专栏收录该内容

89 篇文章 2 订阅

订阅专栏

事件冒泡：子级元素的某个事件被触发，它的上级元素的该事件也被递归触发。

事件委托：使用了事件冒泡的原理，从触发某事件的元素开始，递归地向上级元素传播事件。

事件委托的优点：

1) 对于要大量处理的元素，不必为每个元素都绑定事件，只需要在它们的父元素上绑定一次即可，提高性能。

2) 可以处理动态插入DOM中的元素，对动态插入DOM中的元素进行直接绑定是不行的。

关于事件委托有一个问题：事件委托给父元素后，如何得知事件是哪个子元素触发的？

答：可以通过event.target对象来获取。

<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
	</head>
	<body>
		<div class="button-group">
			<button type="button" class="btn" id="btn1">提交</button>
			<button type="button" class="btn" id="btn2">提交</button>
			<button type="button" class="btn" id="btn3">提交</button>
		</div>    
		<script src = "js/jquery-1.8.2.min.js"></script>
		<script>      
			$(".button-group").on('click', function(e) {
				event.srcElement ? alert(event.srcElement.id) : alert(event.targete.target.id);
			});
		</script>  
	</body>
</html>

事件代理的应用实例请见：http://blog.csdn.net/zhouziyu2011/article/details/70198984

jQuery为事件委托提供了bind()、live()、delegate()、on()、off()、one()方法。

对这些方法的介绍详见：http://blog.csdn.net/zhouziyu2011/article/details/53945994

筱葭

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
浅谈事件委托（事件代理）和事件冒泡

事件冒泡：子级元素的某个事件被触发，它的上级元素的该事件也被递归触发。事件委托：使用了事件冒泡的原理，从触发某事件的元素开始，递归地向上级元素传播事件。事件委托的优点：1) 对于要大量处理的元素，不必为每个元素都绑定事件，只需要在它们的父元素上绑定一次即可，提高性能。2) 可以处理动态插入DOM中的元素，对动态插入DOM中的元素进行直接绑定是不行的。关于事件
复制链接

扫一扫

专栏目录