如何复用无法修改的外部JS文件中的事件处理器

你遇到的Uncaught ReferenceError: show is not defined，根源是作用域不匹配：外部JS里的show函数是定义在jQuery ready回调的局部作用域内的，而你通过new Function重构的函数会在全局作用域执行，自然找不到这个局部函数。

一、jQuery环境下的修复方案 #

方案1：临时修改DOM实现逻辑复用（最简方案） #

不需要重构函数，通过临时修改DOM内容来达到替换foo变量的目的，同时直接复用原事件处理器：

jQuery(function($) {
  // 获取原事件处理器
  const handler = $._data($('.org').get(0), "events")['click'][0]['handler'];
  
  $('.copy').on('click', function(event) {
    // 临时替换.baz的文本
    const originalText = $('.baz').text();
    $('.baz').text('FOO');
    // 调用原处理器，保持this指向和事件对象一致
    handler.call(this, event);
    // 恢复原文本
    $('.baz').text(originalText);
  });
});

方案2：整合依赖函数重构处理器 #

如果需要修改的逻辑更复杂，可将原处理器依赖的show函数一并提取，组合成完整可执行的代码：

jQuery(function($) {
  const handler = $._data($('.org').get(0), "events")['click'][0]['handler'];
  const handlerStr = handler.toString();
  // 从外部JS代码中提取show函数
  const showStr = $('script:contains("function show")').text().match(/function show\(obj\) {[\s\S]*?}/)[0];
  
  // 组合代码并创建新函数，传入jQuery保证作用域一致
  const funcFromStr = new Function('$', `
    ${showStr}
    return function(event) {
      ${handlerStr.match(/\{([\s\S]*)\}/)[1].replace("$('.baz').text()", "'FOO'")}
    }
  `)($);

  $('.copy').on('click', funcFromStr);
});

二、原生JS环境下的解决方案 #

方案1：利用getEventListeners（调试/开发环境） #

仅在Chrome等浏览器的开发者工具环境支持，适合快速调试：

document.addEventListener('DOMContentLoaded', function() {
  const orgLink = document.querySelector('.org');
  // 获取原click事件处理器
  const handler = getEventListeners(orgLink).click[0].listener;
  
  const copyLink = document.querySelector('.copy');
  copyLink.addEventListener('click', function(event) {
    const baz = document.querySelector('.baz');
    const originalText = baz.textContent;
    // 临时修改DOM
    baz.textContent = 'FOO';
    // 调用原处理器
    handler.call(this, event);
    // 恢复DOM
    baz.textContent = originalText;
    event.preventDefault();
  });
});

方案2：全局拦截addEventListener（生产环境兼容） #

提前注入拦截逻辑，记录所有绑定的事件处理器，适合生产环境：

// 需在外部JS加载前执行
(function() {
  const originalAdd = Element.prototype.addEventListener;
  window.eventHandlers = new Map();
  
  Element.prototype.addEventListener = function(type, handler) {
    if (!window.eventHandlers.has(this)) {
      window.eventHandlers.set(this, new Map());
    }
    if (!window.eventHandlers.get(this).has(type)) {
      window.eventHandlers.get(this).set(type, []);
    }
    window.eventHandlers.get(this).get(type).push(handler);
    return originalAdd.call(this, type, handler);
  };
})();

// 外部JS加载后执行
document.addEventListener('DOMContentLoaded', function() {
  const orgLink = document.querySelector('.org');
  const handler = window.eventHandlers.get(orgLink).get('click')[0];
  
  const copyLink = document.querySelector('.copy');
  copyLink.addEventListener('click', function(event) {
    const baz = document.querySelector('.baz');
    const originalText = baz.textContent;
    baz.textContent = 'FOO';
    handler.call(this, event);
    baz.textContent = originalText;
    event.preventDefault();
  });
});

三、其他复用事件处理器的通用方法 #

• 事件委托复用：如果外部JS采用事件委托（如$(document).on('click', 'a', handler)），可直接复用委托逻辑，绑定到目标元素上。
• 全局挂载公共函数：若有权限调整外部JS，可将show这类公共函数挂载到全局对象（如window.show = show），消除作用域限制。
• 绑定原作用域：若能获取到原函数的执行上下文，可通过handler.bind(originalContext)绑定作用域后复用。

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