Javascript 类更改时的事件触发器

我希望在包含触发器类的div标记更改时触发事件

我不知道如何让它听班级的添加事件

测试
document.getElementById.setAttribute（“类”、“触发器”）；
函数名为assadd（）{
警惕（“我被触发”）；
}

确实有，但它们被弃用了，将来还会有变异观察员，但它们在很长一段时间内都不会得到完全支持。那么在这段时间里你能做些什么呢

您可以使用计时器检查元素

function addClassNameListener(elemId, callback) {
    var elem = document.getElementById(elemId);
    var lastClassName = elem.className;
    window.setInterval( function() {   
       var className = elem.className;
        if (className !== lastClassName) {
            callback();   
            lastClassName = className;
        }
    },10);
}

---

运行示例：

未来就在这里，您可以使用该界面查看特定的类更改

let targetNode = document.getElementById('test')

function workOnClassAdd() {
    alert("I'm triggered when the class is added")
}

function workOnClassRemoval() {
    alert("I'm triggered when the class is removed")
}

// watch for a specific class change
let classWatcher = new ClassWatcher(targetNode, 'trigger', workOnClassAdd, workOnClassRemoval)

// tests:
targetNode.classList.add('trigger') // triggers workOnClassAdd callback
targetNode.classList.add('trigger') // won't trigger (class is already exist)
targetNode.classList.add('another-class') // won't trigger (class is not watched)
targetNode.classList.remove('trigger') // triggers workOnClassRemoval callback
targetNode.classList.remove('trigger') // won't trigger (class was already removed)
targetNode.setAttribute('disabled', true) // won't trigger (the class is unchanged)

我用一个简单的类包装了MitationObserver：

class ClassWatcher {

    constructor(targetNode, classToWatch, classAddedCallback, classRemovedCallback) {
        this.targetNode = targetNode
        this.classToWatch = classToWatch
        this.classAddedCallback = classAddedCallback
        this.classRemovedCallback = classRemovedCallback
        this.observer = null
        this.lastClassState = targetNode.classList.contains(this.classToWatch)

        this.init()
    }

    init() {
        this.observer = new MutationObserver(this.mutationCallback)
        this.observe()
    }

    observe() {
        this.observer.observe(this.targetNode, { attributes: true })
    }

    disconnect() {
        this.observer.disconnect()
    }

    mutationCallback = mutationsList => {
        for(let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                let currentClassState = mutation.target.classList.contains(this.classToWatch)
                if(this.lastClassState !== currentClassState) {
                    this.lastClassState = currentClassState
                    if(currentClassState) {
                        this.classAddedCallback()
                    }
                    else {
                        this.classRemovedCallback()
                    }
                }
            }
        }
    }
}

---

下面是一个简单的基本示例，介绍如何在类属性更改时触发回调

const attrObserver=新的突变观察者（（突变）=>{
forEach（mu=>{
if（mu.type！=“attributes”&&mu.attributeName！=“class”）返回；
log（“类被修改了！”）；
});
});
const ELS_test=document.queryselectoral（“.test”）；
ELS_test.forEach（el=>attrObserver.observe（el，{attributes:true}））；
//切换多个.test类名的按钮示例
document.querySelectorAll（“.btn”）.forEach（btn=>{
addEventListener（“单击“，（）=>ELS_test.forEach（el=>el.classList.toggle（btn.dataset.class）））；
});
.blue{背景：blue；}
.gold{color:gold；}
testdiv
背景
COLOR
您确定知道该类将使用
.setAttribute（）
进行更新吗？或者您是在用更随意的术语说话（即，即使用户通过Firebug更改该类，您也希望事件处理程序启动）？FYI因未完全引用您的答案而受到抨击。。。无论如何，它甚至可以使用。。。我对一个类似问题的回答是。。希望这能帮到一些人，这些天你有空，呜呜呜！是啊，看来变异观察员现在得到了广泛的支持。
class ClassWatcher {

    constructor(targetNode, classToWatch, classAddedCallback, classRemovedCallback) {
        this.targetNode = targetNode
        this.classToWatch = classToWatch
        this.classAddedCallback = classAddedCallback
        this.classRemovedCallback = classRemovedCallback
        this.observer = null
        this.lastClassState = targetNode.classList.contains(this.classToWatch)

        this.init()
    }

    init() {
        this.observer = new MutationObserver(this.mutationCallback)
        this.observe()
    }

    observe() {
        this.observer.observe(this.targetNode, { attributes: true })
    }

    disconnect() {
        this.observer.disconnect()
    }

    mutationCallback = mutationsList => {
        for(let mutation of mutationsList) {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                let currentClassState = mutation.target.classList.contains(this.classToWatch)
                if(this.lastClassState !== currentClassState) {
                    this.lastClassState = currentClassState
                    if(currentClassState) {
                        this.classAddedCallback()
                    }
                    else {
                        this.classRemovedCallback()
                    }
                }
            }
        }
    }
}