Как сделать событие на смену класа на чистом javascript?

Question

[Алексей Гончаров]

Здравствуйте. Например есть тег у которого меняется класс. Как сделать событие на смену класса? Например когда у тега класс .selected , то выполнять определенный код. А когда .selected убрался не выполнять код. Я гуглил и нашел только на jQuery, можно такое сделать на javascript?

Comments

[Василий Банников]

Например есть тег у которого меняется класс. Как сделать событие на смену класса?

Класс же не сам по себе меняется.
Почему бы не отвязать код от стилей, и не триггерить этот код одновременно с назначением класса?

Answer 1

[Rsa97]

По вопросу непонятно, что именно вам нужно.
Если проверять наличие класса у элемента, то element.classList.contains('selected').
https://developer.mozilla.org/ru/docs/Web/API/Elem...
Если отлавливать событие изменения класса, то MutationObserver
https://developer.mozilla.org/ru/docs/Web/API/Muta...

Comments

[Алексей Гончаров]

MutationObserver же не может наблюдать за классом элемента

[Алексей Гончаров]

Вы правильно сказали, мне нужно отлавливать событие изменения класса у элемента, но MutationObserver не может наблюдать за изменением класса

[Алексей Гончаров]

Ой я запутался я вспомнил что класс это и есть аттрибут

[Алексей Гончаров]

А возможно теперь исключить значение класса из наблюдения? Например если добавился класс .hover не активировать колбэк функцию, а на остальные изменения наблюдать

[Rsa97]

Алексей Гончаров, Нет. Можно ограничить наблюдение атрибутом class и в обработчике события проверять старое значение атрибута, вычисляя изменение.

[Алексей Гончаров]

Rsa97, Вы не поняли. Мне не нужно старое значение проверять. Мне нужно новое .hover проверять. Как это можно сделать?

[Rsa97]

Алексей Гончаров, Если у вас может меняться несколько классов, то для обнаружения конкретного изменения надо сравнивать старое значение с текущим.
Текущее значение можно получить как mutationsList[i].target.classList или mutationsList[i].target.getAttribute('class').

Answer 2

[Василий Банников]

https://medium.com/@mityamitko/eventlistener-on-cs...

Comments

[Алексей Гончаров]

Я разобрался, все работает, но возможно ли исключить значение аттрибута из наблюдения? Например если у аттрибута значение поменялось на "sdfsdf", то не реагировать

[Василий Банников]

Алексей Гончаров, добавляешь if и игнорируешь

[Алексей Гончаров]

Василий Банников, я понял, а само свойство в котором хранится значение атрибута как называется?

if (?? == "sdfsdf") {
  alert("нечего не делать");
}

[Василий Банников]

Алексей Гончаров, обращайся к текущему списку классов

[Алексей Гончаров]

Василий Банников, К какому списку классов? У меня нету списка, у меня один атрибут это class

[Алексей Гончаров]

Василий Банников, mutationRecords.target выводит undefined. Вы не знаете как?

[Василий Банников]

Алексей Гончаров, я имею в виду через document.querySelector