Javascript 简明教程

JavaScript - Event Capturing

Event Capturing

JavaScript 中的事件捕获是事件传播模型中的初始阶段，其中事件从文档树的根部向下传输到目标元素。在此阶段，浏览器捕获目标元素祖先处的事件，然后才能到达目标元素本身。

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

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

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

Aspect

Description

Phase

事件捕获是事件传播模型中的初始阶段。

Direction

捕获以元素层次结构的相反顺序发生，从文档树的根部向下传输到目标元素。

Use Case

当你想在事件到达目标元素或触发任何冒泡阶段处理程序之前，拦截并处理更高一级的祖先处的事件时，这会非常有用。

Registration

使用 addEventListener 的第三个参数（例如，element.addEventListener('click', myFunction, true);）注册捕获阶段的事件监听器。

Propagation

自动传播在目标和冒泡阶段之前发生。事件向下流动层次结构，在每个祖先处触发捕获阶段处理程序。

Preventing Default

在捕获阶段使用 event.preventDefault() 来阻止事件到达目标之前的默认行为。

Stopping Propagation

在捕获阶段使用 event.stopPropagation() 来阻止事件的进一步传播，防止其到达目标或触发冒泡阶段处理程序。

Example: Basic Event Capturing

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

<!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>

Example: Preventing Default Behaviour

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

如果没有使用 .preventDefault()，它本会将页面导航到 [role="bare"] [role="bare"]https://www.tutorialspoint.com 。

<!DOCTYPE html>
<html>
<body>
	<a href="https://www.tutorialspoint.com" id="link">Click me to prevent default</a>
	<script>
		document.getElementById('link').addEventListener('click', function(event) {
			alert('Capturing phase - Link clicked');
			event.preventDefault(); // Prevent the default behavior (e.g., navigating to a new page)
		}, true);
	</script>
</body>
</html>

Example: Capturing and Stopping Propagation

在此示例中，父 div 的捕获阶段事件监听器使用 'event.stopPropagation()' 积极阻止了传播。仅当单击按钮时，你才会在捕获阶段期间看到一条日志消息（已单击父项），但是它不会触发子元素捕获阶段内的任何进一步操作。这的确展示了一种在此特定实例中阻止进一步传播的有效方法。

<!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>";
			// Stop further propagation to the child element
			event.stopPropagation();
		}, true);
		document.getElementById('child').addEventListener('click', function(event) {
			output.innerHTML += 'Capturing phase - Child clicked' + "<br>";
		}, true);
	</script>
</body>
</html>