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

Question

我有一个类名为mic-button的div，它是一个动态附加的元素。我想听听它的classList的变化，比如，当任何类被添加或从元素中删除时，我想触发function foo()。我更喜欢香草Js。我在网上搜索，只找到了JQUERY的解决方案。

谢谢Rob Wilson

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>