Как назначить событие при изменении класса элемента?

Question

[entermix]

Допустим через JS меняется класс элемента, можно как-то отследить это событие?

Answer 1

[Михаил Горячкин]

Вы можете переопределить ф-ю добавления класса, если вы используете jQuery, получится что-то типо этого:

(function(){
    //Сохраняем ссылку на стандартный метод jQuery
    var originalAddClassMethod = jQuery.fn.addClass;
    //Переопределяем
    $.fn.addClass = function(){
        var result = originalAddClassMethod.apply(this, arguments);
        //Инициализируем событие смены класса
        $(this).trigger('cssClassChanged');
        return result;
    }
})();

$(function(){
    $("#test").bind('cssClassChanged', function(){ 
        //Отработает, как только сменится класс
    });
});

А вообще можно посмотреть в сторону angularjs с его дада-биндингом.

Answer 2

[Илья Шатохин]

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var newVal = $(mutation.target).prop(mutation.attributeName);
        if (mutation.attributeName === "class") {
            // если зашли сюда, значит класс сменился на значение из newVal
        }
    });
});

observer.observe(document.body, { // заменяем document.body на нужный нам элемент
    attributes: true
});