JavaScript - 事件捕获

事件捕获

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

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

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

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

方面	描述
阶段	事件捕获是事件传播模型的初始阶段。
方向	捕获按照元素层次结构的反向顺序发生，从文档树的根节点向下传播到目标元素。
用例	当您希望在事件到达目标元素或触发任何冒泡阶段处理程序之前，在更高级别的祖先节点上拦截和处理事件时很有用。
注册	使用 addEventListener 的第三个参数注册事件捕获阶段的事件监听器（例如，element.addEventListener('click', myFunction, true);）。
传播	在目标阶段和冒泡阶段之前自动传播。事件沿着层次结构向下流动，在每个祖先节点上触发捕获阶段的处理程序。
阻止默认行为	在捕获阶段使用 event.preventDefault() 可以阻止事件的默认行为，使其在到达目标元素之前就被阻止。
停止传播	在捕获阶段使用 event.stopPropagation() 可以停止事件的进一步传播，防止它到达目标元素或触发冒泡阶段的处理程序。

示例：基本事件捕获

在此示例中，我们有一个容器 div (container) 以及其内部的一个按钮 (myButton)。使用 addEventListener 并将第三个参数设置为 true 来添加两个捕获阶段的事件监听器，以启用捕获。当您单击按钮时，两个捕获阶段的日志消息（Container clicked 和 Button clicked）将被显示。这说明了事件从文档根节点向下传播到目标元素的捕获阶段。

<!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://tutorialspoint.com。

<!DOCTYPE html>
<html>
<body>
	<a href="https://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>

示例：捕获和停止传播

在这个例子中，父 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>

打印页面