js

passive

在 JavaScript 中，passive 是一个布尔值，用于指定事件监听器是否应该被标记为“被动”的。这个属性主要用于触摸事件（如 touchstart、touchmove、touchend 和 touchcancel）和滚轮事件（如 wheel）。

什么是被动事件监听器？

被动事件监听器是一种不会阻止浏览器默认行为的异步事件监听器。默认情况下，事件监听器是同步的，这意味着它们会阻止浏览器执行默认行为，直到事件处理程序执行完毕。但是，被动事件监听器不会阻止浏览器执行默认行为，从而提高了滚动性能。

如何使用 passive 选项？

你可以通过在事件监听器的 addEventListener 方法中设置 passive 选项来指定事件监听器是否应该被标记为被动。

1
2
3
4
5
6
7
element.addEventListener(
	"touchstart",
	function (event) {
		// 处理触摸事件
	},
	{ passive: true }
);

在上面的例子中，我们为 touchstart 事件添加了一个被动的事件监听器。这意味着浏览器可以自由地执行默认的触摸行为，而不会等待事件处理程序执行完毕。

注意事项

  • 被动事件监听器只能用于触摸事件和滚轮事件。对于其他事件，passive 选项将被忽略。
  • 如果事件处理程序需要阻止默认行为，那么它不能被标记为被动。否则，浏览器将无法执行默认行为。
  • 被动事件监听器可以提高滚动性能，但它们可能会影响其他事件的处理。因此，在使用被动事件监听器时，要确保你的代码可以正确地处理所有事件。

示例

以下是一个使用被动事件监听器的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
	<head>
		<title>Passive Event Listener Example</title>
	</head>
	<body>
		<div id="scrollable" style="width: 200px; height: 200px; overflow: scroll;">
			<div style="height: 1000px;"></div>
		</div>

		<script>
			const scrollable = document.getElementById("scrollable");

			scrollable.addEventListener(
				"scroll",
				function (event) {
					console.log("Scrolling...");
				},
				{ passive: true }
			);
		</script>
	</body>
</html>

在上面的例子中，我们为 scroll 事件添加了一个被动的事件监听器。这意味着浏览器可以自由地执行滚动行为，而不会等待事件处理程序执行完毕。