如何为动态附加元素的 classList 添加事件侦听器

Question

我有一个 div，名称为 class mic-button，它是一个动态追加的元素。我想监听它的 classList 的变化，比如，我想在元素中添加或删除任何 class 时触发 function foo()。我更喜欢使用 Vanilla Js。我在互联网上搜索，我只得到 JQUERY.

的解决方案

谢谢，罗伯·威尔逊

Answer 1

我很确定没有这方面的事件，但也许你可以每秒检查一次 ClassName 的变化。
像这样：

var current = "mic-button";
window.setInterval(() => {
  var classN = document.querySelector(".mic-button").className;
  if (classN != current) {foo(); current = classN;}
}, 1000);

function foo() {
  console.log("foo");
 }

<button class="mic-button">Mic-button</button><br />
<button onclick="document.querySelector('.mic-button').classList.add('foo');">add class</button><br />
<button onclick="document.querySelector('.mic-button').classList.remove('foo');">remove class</button>

如何为动态附加元素的 classList 添加事件侦听器

How to add event listener for a dynamically appended element's classList

javascript

class

event-listener

addeventlistener