原生JavaScript复制事件监听器：WordPress插件改写解决方案

我完全懂你的困扰——getEventListeners()确实是浏览器控制台独有的工具，没法在正式代码里调用。针对你改写WordPress插件、替换元素后需要重新绑定原有事件的场景，这里有几个靠谱的方案，你可以根据实际情况选择：

方案1：事件委托（首推） #

这个方法从根源上避开了“复制监听器”的问题，思路是把事件绑定到不会被你替换的父元素上，利用事件冒泡机制监听子元素的点击。哪怕你把.affirm-modal-trigger换掉，新元素触发点击时，父元素绑定的事件依然能生效。

修改你的代码如下：

// 先绑定事件委托，确保在元素替换前就生效
document.addEventListener("click", function(e) {
  // 判断点击的是不是目标按钮
  if (e.target.matches(".affirm-modal-trigger")) {
    // 如果能找到Affirm插件的原生触发方法（比如全局的Affirm.openModal()），直接调用最稳妥
    // 要是找不到，也可以尝试模拟原插件的逻辑，不过优先找官方暴露的方法
  }
});

// 执行元素替换逻辑
(function replaceAffirm() {
  const learnMore = document.querySelector("#learn-more");
  if (learnMore) {
    const substr = learnMore.innerHTML.toString().substring(learnMore.innerHTML.indexOf("h") + 2);
    learnMore.innerHTML = "Easy Financing with " + substr;
  } else {
    setTimeout(replaceAffirm, 250);
  }
})();

如果不清楚插件的原生触发方法，可以试试下面的方案。

方案2：拦截addEventListener记录监听器 #

我们可以在插件加载并绑定事件之前，重写原生的addEventListener方法，把所有绑定的事件都记录下来。这样之后就能拿到目标元素的监听器了。

// 这段代码必须在Affirm插件加载前执行！用来记录所有事件监听器
const listenerMap = new WeakMap();
const originalAddEventListener = EventTarget.prototype.addEventListener;

// 重写原生方法，添加记录逻辑
EventTarget.prototype.addEventListener = function(type, listener, options) {
  if (!listenerMap.has(this)) {
    listenerMap.set(this, {});
  }
  if (!listenerMap.get(this)[type]) {
    listenerMap.get(this)[type] = [];
  }
  listenerMap.get(this)[type].push(listener);
  
  // 别忘了调用原生的addEventListener
  return originalAddEventListener.call(this, type, listener, options);
};

// 你的元素替换与重绑定逻辑
(function replaceAffirm() {
  if (document.querySelector(".affirm-modal-trigger")) {
    const learnMore = document.querySelector("#learn-more");
    const oldModalTrigger = document.querySelector(".affirm-modal-trigger");
    
    // 从记录中获取原点击监听器
    const clickHandlers = listenerMap.get(oldModalTrigger)?.click || [];
    const targetHandler = clickHandlers[0]; // 假设第一个是插件绑定的监听器
    
    // 修改文本内容
    const substr = learnMore.innerHTML.toString().substring(learnMore.innerHTML.indexOf("h") + 2);
    learnMore.innerHTML = "Easy Financing with " + substr;
    
    // 给新生成的按钮绑定原监听器
    const newModalTrigger = document.querySelector(".affirm-modal-trigger");
    if (targetHandler && newModalTrigger) {
      newModalTrigger.addEventListener("click", targetHandler);
    }
  } else {
    setTimeout(replaceAffirm, 250);
  }
})();

在WordPress环境里，你可以把这段拦截代码设置成比Affirm插件脚本更早加载，这样才能捕获到插件绑定的事件。

方案3：直接复用插件的事件处理函数 #

如果能找到Affirm插件的源代码，定位到它绑定给.affirm-modal-trigger的点击处理函数，直接在你的代码里引用就行。很多插件会把核心方法挂载到全局对象上，比如window.Affirm：

(function replaceAffirm() {
  if (document.querySelector(".affirm-modal-trigger")) {
    const learnMore = document.querySelector("#learn-more");
    
    // 修改文本内容
    const substr = learnMore.innerHTML.toString().substring(learnMore.innerHTML.indexOf("h") + 2);
    learnMore.innerHTML = "Easy Financing with " + substr;
    
    // 给新按钮绑定插件的原生处理函数
    const newModalTrigger = document.querySelector(".affirm-modal-trigger");
    if (newModalTrigger && window.Affirm?.handleModalTrigger) {
      newModalTrigger.addEventListener("click", window.Affirm.handleModalTrigger);
    }
  } else {
    setTimeout(replaceAffirm, 250);
  }
})();

这个方案最简洁，但需要你能找到插件暴露的处理函数，可能得查看插件的JS代码或者官方文档。

方案4：克隆元素保留事件（仅适用于内联事件） #

如果插件是用内联事件（比如<a onclick="xxx()">）绑定的，用cloneNode(true)克隆原元素时会保留事件。但如果是用addEventListener绑定的，这个方法就无效了：

(function replaceAffirm() {
  if (document.querySelector(".affirm-modal-trigger")) {
    const learnMore = document.querySelector("#learn-more");
    const oldModalTrigger = document.querySelector(".affirm-modal-trigger");
    
    // 克隆原按钮（保留内联事件）
    const clonedTrigger = oldModalTrigger.cloneNode(true);
    
    // 修改文本内容
    const substr = learnMore.innerHTML.toString().substring(learnMore.innerHTML.indexOf("h") + 2);
    learnMore.innerHTML = "Easy Financing with " + substr;
    
    // 把新生成的按钮换成克隆的版本
    const newModalTrigger = document.querySelector(".affirm-modal-trigger");
    if (newModalTrigger) {
      newModalTrigger.replaceWith(clonedTrigger);
    }
  } else {
    setTimeout(replaceAffirm, 250);
  }
})();

这个方案局限性比较大，现代插件基本都用addEventListener，所以优先级靠后。

总的来说，事件委托或者**拦截addEventListener**是最稳妥的方案，具体选哪个看你能不能提前加载拦截代码，以及是否能找到插件的原生触发方法。

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