如何通过JS为所有滚动相关事件自动添加passive被动监听器？

可以通过重写原生EventTarget.prototype.addEventListener方法实现全局默认给滚动相关事件添加passive: true配置，无需修改第三方库或插件的原有代码。

以下是可直接使用的实现代码：

// 缓存原生事件绑定方法
const nativeAddEventListener = EventTarget.prototype.addEventListener;

EventTarget.prototype.addEventListener = function (eventType, listener, options) {
  // 匹配需要默认开启passive的高频滚动/触摸事件
  const targetEvents = ['touchstart', 'touchmove', 'wheel', 'mousewheel'];

  if (targetEvents.includes(eventType)) {
    // 处理options参数的两种传入格式：布尔值 / 配置对象
    if (options === undefined) {
      options = { passive: true };
    } else if (typeof options === 'object' && options.passive === undefined) {
      // 仅当没有显式设置passive值时添加默认配置，避免覆盖自定义设置
      options.passive = true;
    }
  }

  // 调用原生方法完成事件绑定
  return nativeAddEventListener.call(this, eventType, listener, options);
};

注意事项 #

• 代码需要放在所有第三方JS、WP插件脚本加载之前执行才能生效，WordPress站点可以将代码挂载到wp_head钩子，并将优先级设置为1，保证最先加载。
• 如果有业务场景需要在事件回调中调用preventDefault()，需要在绑定对应事件时显式传入passive: false覆盖默认配置，否则会触发浏览器报错。
• 该方案兼容所有支持passive属性的浏览器，不支持的旧版浏览器会自动忽略未知的配置属性，不会产生兼容问题。
• 配置完成后可重新运行Google Pagespeed检测，或通过Chrome DevTools的Performance面板录制滚动操作验证性能优化效果。

内容的提问来源于stack exchange，提问作者Fredy31