如何在纯Javascript中复制事件侦听器

所以我在Wordpress插件上做了一些覆盖。我需要复制元素上的事件侦听器，然后替换元素并将其添加回。事件侦听器由插件生成

我原以为getEventListeners（）可以工作，但我读到它只在控制台中工作。如果是这样的话，我真的很震惊。我们在2020年，我没有找到一个明显的解决办法

这里的解决方案是什么

下面是我试图实现的代码，假设getEventListeners不仅仅是一个控制台函数

  // Edit Affirm
  (function replaceAffirm() {
    if (document.querySelector(".affirm-modal-trigger")) {
      const learnMore = document.querySelector("#learn-more");
      const modalTrigger = document.querySelector(".affirm-modal-trigger");
      const clickHandler = getEventListeners(modalTrigger).click[0].listener;
      const substr = learnMore.innerHTML
        .toString()
        .substring(
          learnMore.innerHTML.indexOf("h") + 2,
          learnMore.innerHTML.length
        );
      learnMore.innerHTML = "Easy Financing with " + substr;
      modalTrigger.addEventListener("click", clickHandler);
    } else {
      setTimeout(function () {
        replaceAffirm();
      }, 250);
    }
  })();

HTML

开始于
$68
/带
断言。

是等待加载Html元素并检查直到加载为止是可以的，这是等待的正确方法之一

根据我对您的问题的理解，您只需更改“了解更多”元素的文本。 为此，无需复制事件侦听器，然后再次绑定它

与其替换整个元素，不如更改文本，保持相同的元素。

---

因此，默认情况下，它会与事件侦听器绑定。

是的，等待加载Html元素并在加载之前进行检查是可以的，这是等待它的正确方法之一

根据我对您的问题的理解，您只需更改“了解更多”元素的文本。 为此，无需复制事件侦听器，然后再次绑定它

与其替换整个元素，不如更改文本，保持相同的元素。

---

因此，默认情况下，它与事件侦听器绑定。

您不能复制事件侦听器，但由于HTML的结构，您更可能不需要重新添加它。与其编辑HTML并删除事件侦听器，最好的办法是围绕它进行编辑

如果要删除文本节点，可以遍历

childNodes

并分离出应该删除的内容

然后，要在需要的地方重新生成适当的文本，可以使用

insertAdjacentText

if（document.querySelector（“确认模式触发器”））{
const learnMore=document.querySelector（“了解更多”）；
const modalTrigger=document.querySelector（“确认模式触发器”）；
const children=Array.from（learnMore.childNodes）；
children.forEach（child=>{
if（child.nodeType===Node.TEXT_Node | | child.matches（“.ala price”））{
if（learnMore.contains（子））{
learnMore.removeChild（儿童）；
}
}
});
learnMore.insertAdjacentText（“afterBegin”，“轻松融资”）；
modalTrigger.insertAdjacentText（“beforebeagin”，“beforebeagin”）；
}否则{
setTimeout（函数（）{
替换确认（）；
}, 250);
}

开始于
68美元/月，含
断言。

您无法复制事件侦听器，但由于HTML的结构，似乎更可能不需要重新添加它。与其编辑HTML并删除事件侦听器，最好的办法是围绕它进行编辑

如果要删除文本节点，可以遍历

childNodes

并分离出应该删除的内容

然后，要在需要的地方重新生成适当的文本，可以使用

insertAdjacentText

if（document.querySelector（“确认模式触发器”））{
const learnMore=document.querySelector（“了解更多”）；
const modalTrigger=document.querySelector（“确认模式触发器”）；
const children=Array.from（learnMore.childNodes）；
children.forEach（child=>{
if（child.nodeType===Node.TEXT_Node | | child.matches（“.ala price”））{
if（learnMore.contains（子））{
learnMore.removeChild（儿童）；
}
}
});
learnMore.insertAdjacentText（“afterBegin”，“轻松融资”）；
modalTrigger.insertAdjacentText（“beforebeagin”，“beforebeagin”）；
}否则{
setTimeout（函数（）{
替换确认（）；
}, 250);
}

开始于
68美元/月，含
断言。

据我所知可能很有用，该功能仅限于Chrome，而不限于控制台。无论如何，您可以删除该元素，然后将其添加回其他位置。另外，请添加相关的HTML代码。您所做的似乎是在错误地思考您的问题。你到底想用字符串操作做什么？为什么它必须每250毫秒发生一次？我直接告诉你。您不能复制vanilla JS中的事件处理程序。完全这不是一个你可以使用的东西，因为它在vanilla JS中根本不可能。除非有外部引用，否则事件处理程序一经添加就会被黑盒。然而，可能有一种方法可以得到你想要的最终结果，你只是朝着错误的方向寻找解决方案。“我将在10分钟后看一看，并尝试提供帮助。”MichaelPaccione理论上，这可能是为了安全，但更可能的是，它只是被设计强制进入那种状态。一些库（如JQuery）实现了自己的事件侦听器代理对象，以便更好地管理事件。我添加了一个答案，但如果它不是您想要的，请告诉我。据我所知，该功能可能很有用，仅限于Chrome，而不限于控制台。无论如何，您可以删除该元素，然后将其添加回其他位置。另外，请添加相关的HTML代码。您所做的似乎是在错误地思考您的问题。你到底想干什么

<p id="learn-more" class="affirm-as-low-as" data-amount="20000" data-affirm-color="white" data-learnmore-show="true" data-page-type="product">
   Starting at 
   <span class="affirm-ala-price">$68</span>
   /mo with 
   <span class="__affirm-logo __affirm-logo-white __ligature__affirm_full_logo__ __processed">Affirm</span>. 
   <a class="affirm-modal-trigger" aria-label="Prequalify Now (opens in modal)" href="javascript:void(0)">Prequalify now</a>
</p>