在前端开发中，我们经常需要使用事件侦听器（event listener）来监听用户操作并做出相应的反应。而被动事件侦听器（passive event listener）则是一种特殊的事件侦听器，它可以更加高效地处理滚动事件，提高网站的性能和用户体验。
背景
在浏览器中，滚动事件是非常常见的一种事件类型。当用户在页面上进行滚动时，浏览器会不断地触发“scroll”事件。这个过程可能会占用大量的 CPU 资源，并导致页面卡顿，尤其是在移动设备上。
为了解决这个问题，W3C 在 2016 年引入了被动事件侦听器。它可以告诉浏览器哪些事件处理程序不会调用 preventDefault() 方法，从而让浏览器在事件传播期间跳过默认行为检查，提高性能。
如何使用被动事件侦听器
使用被动事件侦听器非常简单，只需在添加事件侦听器时将第三个参数设置为 { passive: true } 即可。例如：
// 普通的事件侦听器
window.addEventListener('scroll', handleScroll);
// 使用被动事件侦听器
window.addEventListener('scroll', handleScroll, { passive: true });示例代码
下面是一个简单的示例，演示了如何使用被动事件侦听器来提高页面性能。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- ----- -------- ------------
-------
---- -
------- --------
-
---- -
--------- ------
---- ----
----- ----
---------- --------------- ------
-
--------
-------
------
---- --------------- ---- -- --- -- -----------
--------
----- --- - -------------------------------
-------- -------------- -
------------------- - ---------------- ----------------------
-
-- --------
-- --------------------------------- --------------
-- ---------
--------------------------------- ------------- - -------- ---- ---
---------
-------
-------在这个示例中，我们创建了一个固定在屏幕中央的方块，并将它的位置与窗口滚动位置关联起来。如果我们使用普通的事件侦听器来监听滚动事件，这个示例会非常卡顿。但如果我们使用被动事件侦听器，我们会发现滚动更加流畅，并且页面反应更加迅速。
建议
尽管被动事件侦听器可以提高页面性能，但它并不适用于所有情况。如果你的事件处理程序需要调用 preventDefault() 方法，就不能使用被动事件侦听器。此外，被动事件侦听器的应用场景还受到浏览器的支持程度的影响。在使用被动事件侦听器时，建议先测试其在目标浏览器上的兼容性。
结论
被动事件侦听器是一种高效处理滚动事件的技术，可以大幅提升页面性能和用户体验。但它并不适用于所有情况，需要根据具体情况进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11647