如何为网页所有已绑定事件设置统一回调以自动清除setInterval

无需逐个修改已有事件绑定逻辑，可通过以下两种方案实现全局统一追加回调：

方案1：利用事件冒泡顶层监听（推荐，无侵入） #

大部分交互事件都会向上冒泡到document节点，直接在顶层监听所有需要的事件类型即可满足需求，实现代码如下：

// 实现你需要的全局回调追加方法
function AdditionalCallbackForEveryEventSet(callback) {
  // 可根据实际需求增减监听的事件类型
  const targetEvents = [
    'click', 'dblclick', 'mousedown', 'mouseup', 
    'keydown', 'keyup', 'scroll', 'wheel',
    'touchstart', 'touchend', 'input', 'change',
    'submit', 'focusin', 'focusout'
  ];
  targetEvents.forEach(eventType => {
    // once: true 表示回调仅执行一次，执行后自动销毁监听避免内存占用
    document.addEventListener(eventType, callback, { once: true, passive: true });
  });
}

// 你的业务代码
const timer = setInterval(function() {
    // 执行动画逻辑
}, 50);

// 调用方法，任意交互事件触发后自动清除定时器
AdditionalCallbackForEveryEventSet(function() {
    clearInterval(timer);
});

• 若需要每次事件触发都执行回调，删除once: true配置即可
• focusin/focusout可覆盖原本不冒泡的焦点类事件，无需修改原有绑定逻辑

方案2：重写事件绑定原型（全量覆盖，适合特殊场景） #

如果需要严格覆盖所有通过addEventListener绑定的事件（包括不冒泡、绑定在shadow DOM里的事件），可以通过重写EventTarget原型方法实现自动注入回调：

// 保存原生addEventListener方法
const originalAddEventListener = EventTarget.prototype.addEventListener;
let globalEventCallback = null;

// 重写绑定方法，注入全局回调
EventTarget.prototype.addEventListener = function(type, listener, options) {
  const wrappedListener = function(...args) {
    // 全局回调存在则先执行
    globalEventCallback?.(...args);
    // 执行原有事件逻辑
    return listener.apply(this, args);
  };
  return originalAddEventListener.call(this, type, wrappedListener, options);
};

// 定义全局回调设置方法
function AdditionalCallbackForEveryEventSet(callback) {
  globalEventCallback = callback;
}

// 业务代码使用方式和上面完全一致
const timer = setInterval(function() {
    // 动画逻辑
}, 50);

AdditionalCallbackForEveryEventSet(function() {
  clearInterval(timer);
  // 执行完后清空全局回调，避免后续事件再触发
  globalEventCallback = null;
});

该方案会影响页面所有事件绑定，用完后及时清空globalEventCallback即可恢复正常逻辑，不会残留副作用。

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