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

Question

所以我正在对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

<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>

Answer 1

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

如果要删除文本节点，可以循环访问childNodes并分离出应删除的内容。

然后，要在所需的位置重建适当的文本，您可以使用insertAdjacentText

if (document.querySelector(".affirm-modal-trigger")) {
const learnMore = document.querySelector("#learn-more");
const modalTrigger = document.querySelector(".affirm-modal-trigger");
const children = Array.from(learnMore.childNodes);
children.forEach(child => {
if (child.nodeType === Node.TEXT_NODE || child.matches(".affirm-ala-price")) {
if (learnMore.contains(child)) {
learnMore.removeChild(child);
}
}
});
learnMore.insertAdjacentText("afterBegin", "Easy Financing With ");
modalTrigger.insertAdjacentText("beforeBegin", " ");
} else {
setTimeout(function() {
replaceAffirm();
}, 250);
}

<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>

Answer 2

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

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

与其替换整个元素，不如更改保留相同元素的文本。 因此，默认情况下它与事件侦听器绑定。