前端知识点分析——捕获、冒泡、事件委托

最新推荐文章于 2025-04-08 20:04:38 发布

sophia_little

最新推荐文章于 2025-04-08 20:04:38 发布

阅读量323

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识点

本文链接：https://blog.youkuaiyun.com/sophia_little/article/details/79642459

前端知识点专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨了前端事件处理中的关键概念，包括事件流的三种模式：事件捕获、冒泡和DOM事件流。详细解释了事件冒泡的原理，即事件从最具体元素向上层传播的过程，以及事件捕获的反向顺序。此外，还介绍了DOM2级事件处理程序，如addEventListener方法，用于在捕获或冒泡阶段绑定事件处理函数，并阐述了事件委托的概念及其优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.事件流

描述的是从页面中接收事件的顺序

2.事件冒泡

1.IE的事件流，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="myDiv">click me</div>
	</body>
</html>

当你单击了div，则事件按照如下顺序传播：

<div>

<body>

<html>

document

2.所有现代浏览器都支持事件冒泡

2.事件捕获

1.Netscape提出，思想是不太具体的节点应该更早接收到事件，而具体的节点应该最后接收到事件。

则上面代码点击div之后的顺序如下

document

<html>

<body>

<div>

3.DOM事件流

1.包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

2.首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

4.DOM2级事件处理程序

用于指定和删除事件处理程序的操作：addEventListener（）和removeEventListener（），都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值为true代表在捕获阶段调用事件处理函数、为false表示在冒泡阶段调用时间处理函数。

5.事件委托

使用事件委托技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<ul id="ul" >
			<li data-key="北京">北京</li>
			<li data-key="上海">上海</li>
			<li data-key="杭州">杭州</li>
		</ul>
		<script type="text/javascript">
			document.getElementById('ul').addEventListener('click',function(e){
				var value=e.target.attributes['data-key'].value;
				e.target.style.backgroundColor = 'red';
				console.log(value);
		});
		</script>
	</body>
</html>