JavaScript - 事件捕获

上一页
下一页

事件捕获

JavaScript 中的事件捕获是事件传播模型的初始阶段，在该阶段，事件从文档树的根向下传播到目标元素。在此阶段，浏览器在到达目标本身之前捕获目标元素的上级上的事件。

事件捕获和事件冒泡是 JavaScript 事件传播模型中的两个阶段。在事件捕获中，浏览器捕获并触发从文档层次结构的根开始向下移动到目标元素的事件。另一方面，事件冒泡发生在事件到达目标元素之后，然后从目标向上冒泡到根。

捕获对于处理更高级别祖先的事件很有用，而冒泡是事件从目标传播回层次结构的默认行为。了解这两个阶段对于有效的事件处理和事件流的操作至关重要。

让我们看看事件捕获的一些重要方面。

方面 描述
Phase 事件捕获是事件传播模型的初始阶段。
Direction 捕获按元素层次结构的相反顺序进行，从文档树的根到目标元素。
Use Case 当您想要在事件到达目标元素或触发任何冒泡阶段处理程序之前拦截和处理更高级别上级的事件时，这很有用。
Registration 使用 addEventListener 的第三个参数（例如 element.addEventListener（'click'， myFunction， true）;) 为捕获阶段注册事件侦听器。
Propagation 在 target 和 bubbing 阶段之前自动传播。该事件沿层次结构向动，从而触发每个祖先上的捕获阶段处理程序。
Preventing Default 在捕获阶段使用 event.preventDefault（） 以防止事件在到达目标之前出现默认行为。
Stopping Propagation 在捕获阶段使用 event.stopPropagation（） 来阻止事件的进一步传播，防止它到达目标或触发冒泡阶段处理程序。

示例：基本事件捕获

在此示例中，我们有一个容器 div （container） 和一个按钮 （myButton）。使用 addEventListener 和 true 参数添加了两个捕获阶段事件监听器，以启用捕获。单击该按钮时，将显示捕获阶段日志消息（单击容器和单击按钮）。这说明了事件从文档根向下移动到目标元素时的捕获阶段。


<!DOCTYPE html>
<html>
<body>	
		 	<div id="container">
		 			 	<button id="myButton">Click me!</button>
		 	</div>
		 	<div id = "output"></div>
		 	<script>
		 			 	const output = document.getElementById('output');
		 			 	document.getElementById('container').addEventListener('click', function(event) {
		 			 			 	output.innerHTML += 'Capturing phase - Container clicked' + "<br>";
		 			 	}, true);

		 			 	document.getElementById('myButton').addEventListener('click', function(event) {
		 			 			 	output.innerHTML += 'Capturing phase - Button clicked' + "<br>";
		 			 	}, true);
		 	</script>
</body>
</html>

示例：防止默认行为

在此示例中，我们有一个 ID 为 “link” 的超链接 （<a>）。捕获阶段事件侦听器在捕获阶段附加到链接。当您单击链接时，将显示捕获阶段日志消息（已单击链接），并使用 event.preventDefault（） 阻止默认行为（导航到新页面）。

如果。preventDefault（） 时，它会将页面导航到 https://www.qikepu.com。


<!DOCTYPE html>
<html>
<body>
		 	<a href="https://www.qikepu.com" id="link">Click me to prevent default</a>
		 	<script>
		 			 	document.getElementById('link').addEventListener('click', function(event) {
		 			 			 	alert('Capturing phase - Link clicked');
		 			 			 	event.preventDefault(); // 防止默认行为（例如，导航到新页面）
		 			 	}, true);
		 	</script>
</body>
</html>

示例：捕获和停止传播

在此示例中，父 div 的捕获阶段事件侦听器通过使用 'event.stopPropagation（）' 主动停止传播。只有在单击该按钮时，您才会在捕获阶段看到一条日志消息（“Parent clicked”）显示;但是，它不会在子元素的捕获阶段中触发任何进一步的操作。这确实展示了一种在这种特定情况下阻止额外传播的有效方法。


<!DOCTYPE html>
<html>
<body>
		 	<div id="parent">
		 			 	<button id="child">Click me!</button>
		 	</div>
		 	<div id = "output"></div>
		 	<script>
		 			 	const output = document.getElementById('output');
		 			 	document.getElementById('parent').addEventListener('click', function(event) {
		 			 			 	output.innerHTML += 'Capturing phase - Parent clicked' + "<br>";
		 			 			 	// 停止进一步传播到子元素
		 			 			 	event.stopPropagation();
		 			 	}, true);
		 			 	document.getElementById('child').addEventListener('click', function(event) {
		 			 			 	output.innerHTML += 'Capturing phase - Child clicked' + "<br>";
		 			 	}, true);
		 	</script>
</body>
</html>
打印本页
上一页
下一页