Как скопировать прослушиватель событий в простой Javascript - PullRequest
Новая
       67

Как скопировать прослушиватель событий в простой Javascript

1 голос
/ 30 мая 2020

Итак, я делаю некоторые изменения в плагине 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>

Ответы [ 2 ]

0 голосов
/ 31 мая 2020

Вы не можете копировать прослушиватели событий, но, похоже, из-за структуры вашего 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>
0 голосов
/ 30 мая 2020

Да, ожидание загрузки элемента Html и проверка, пока он не загрузится, - это нормально, и это один из правильных способов дождаться его.

В соответствии с моим пониманием вашей проблемы вы просто нужно изменить текст элемента обучения. для этого нет необходимости копировать прослушиватель событий и затем снова связывать его.

Вместо замены всего элемента просто измените текст, сохранив тот же элемент. Так что по умолчанию он привязывается к прослушивателю событий.

...