时间戳

首页 > 解决方案 > 有没有办法在 DOM 节点发生变异之前得到通知？

javascript - 有没有办法在 DOM 节点发生变异之前得到通知？

问题描述

您可能知道，有一个非常方便MutationObserver的方法可以在 DOM 节点发生更改后通知我们（例如，子元素已重新排序或删除）

我正在寻找一种在此类更改即将发生之前也得到通知的方法。

有这样的东西吗？...

标签： javascriptdommutation-observers

解决方案

我不确定这是否会有所帮助，但这与我在评论中的意思相似。

您可以阅读有关创建自定义触发器和事件的信息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>

推荐阅读