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

Question

我有一个带有 className mic-button的 div，它是一个动态附加的元素。 我想监听它的classList的变化，比如，当从元素中添加或删除任何 class 时，我想触发function foo() 。 我更喜欢使用香草 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>