如何为指定标签创建侦听器

Question

我想在DOM更新并有一个新标签时为指定的标签创建一个侦听器。在这种情况下，是聊天，我需要获取所有新的<audio>标记才能在其后插入一个类。

如何仅为一个标签创建指定的侦听器？

我不想创建setInterval，以获得更好的性能。但是我没有其他办法。如何做到这一点的更好方法？

Answer 1

[如果我理解正确，您想检测何时将<audio/>元素添加到文档中，并在检测到此事件时，将CSS类分配给新添加的audio元素。

避免轮询的一种可能性是使用MutationObserver-一种简单的解决方案是观察body元素中childList或subtree的任何变化，以及检测到的任何变化，是由新添加的audio节点引起的，请向该audio节点添加所需的类：

/* Mutation handler will assign "addedAudio" class to
any newly added audio elements */
function onMutation(mutations) {

  for (const mutation of mutations) {
    if (mutation.type === 'childList') {

      /* This mutation type is a change to tree nodes in dom */
      for (const addedNode of mutation.addedNodes) {
        if (addedNode.nodeName === 'AUDIO') {

          /* The node triggering this mutation is an audio node */
          addedNode.classList.add("addedAudio");
        }
      }
    }
  }
}

/* Create dom mutation observer with callback, and
bind observer to body (eg "root") of your web app
and watch all children and subtrees for any changes */
(new MutationObserver(onMutation))
.observe(document.querySelector("body"), {
  childList: true,
  subtree: true
})

/* For demo purpose only to simulate adding new audio element to document */
document.querySelector('button').addEventListener('click', () => {

  const audio = document.createElement("audio");
  audio.setAttribute('controls', true);
  audio.setAttribute('src', 'https://www.w3schools.com/html/horse.ogg');

  document.body.prepend(audio);
});

.addedAudio {
  border: 1px solid red;
}

<button>Add audio</button>

[注意，一种更有效的方法是观察具有较少子级，浅子树等的DOM节点。例如，如果将所有audio元素都添加到一个公共DOM元素中，请考虑观察该元素，而不是body。

希望是某些用户！