Есть ли способ получить уведомление прямо перед тем, как будет изменен узел DOM?

Question

Как вы, возможно, знаете, есть очень удобный MutationObserver, который может уведомить нас после того, как произошли изменения в узле DOM (например, дочерние элементы были переупорядочены или удалены)

Я ищу способ также получить уведомление прямо до таких изменений вот-вот произойдет.

Существует ли что-то подобное? ...

Answer 1

Я не уверен, что это точно поможет, но это похоже на то, что я имел в виду в комментариях.

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

Вы можете сделать это более общим, это всего лишь быстрый макет:

---

let beforeChangeEvent = new Event('beforechange');
let delay = 1000; // 1 second

function attachChangeEvents() {
  let ul = document.querySelectorAll('li');
  ul.forEach(el => {
    el.addEventListener('beforechange', e => {
      console.log(e.target.textContent + " is about to change.")
    });
  });
}

function simulateModifyNode() {
  let ul = document.querySelectorAll('li');
  let liCount = ul.length;
  let randomLi = Math.floor(Math.random() * liCount);
  ul[randomLi].dispatchEvent(beforeChangeEvent);
  setTimeout(() => {
    ul[randomLi].style.color = 'red';
  }, delay);
}

attachChangeEvents();

simulateModifyNode();

<div>
  <ul>
    <li>Node 1</li>
    <li>Node 2</li>
    <li>Node 3</li>
    <li>Node 4</li>
    <li>Node 5</li>
    <li>Node 6</li>
    <li>Node 7</li>
  </ul>
</div>