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>

有没有一种方法可以在DOM节点突变之前立即得到通知？

1 个答案: