Приятно иметь прослушиватели событий для событий в элементах, но как вы отслеживаете что-то вроде изменения атрибута?
Введите MutationObserver. Одно из его лучших качеств - это возможность наблюдать за данными, которые иначе невозможно «прослушать», как традиционное событие DOM.
Сначала настройте функцию, которая будет вызываться MutationObserver. Требуется всего один аргумент: mutationsList. Каждый элемент в списке называется MutationRecord. Обратный вызов может делать все, что вы хотите.
const mutationCallback = (mutationsList) => {
for (const mutation of mutationsList) {
if (
mutation.type !== "attributes" ||
mutation.attributeName !== "data-foo"
) {
return
}
console.log('old:', mutation.oldValue)
console.log('new:', mutation.target.getAttribute("data-foo"))
}
}
Затем MutationObserver принимает ваш обратный вызов при инициализации экземпляра:
const observer = new MutationObserver(mutationCallback)
Конечно, мы еще не отключили наблюдателя. просто вызовите метод observe для своей новой переменной. Его аргументы - это элемент для наблюдения и объект, описывающий наблюдаемые вами данные:
observer.observe(myElement, { attributes: true })
Наконец, вы можете прекратить наблюдение за изменениями с помощью метода disconnect:
observer.disconnect()
Вот и все. Легко, правда? Ну просто будь осторожен; может возникнуть соблазн создать новых наблюдателей за мутациями для каждой мелочи. Вместо этого постарайтесь объединить как можно больше в одном наблюдателе. Вы также можете добавить subtree: true при вызове метода observe, чтобы отслеживать изменения дочерних узлов!
Ознакомьтесь с полным набором опций для просмотра наблюдаемых данных здесь.
Если вам понравилось то, что вы читаете, не стесняйтесь стереть эту кнопку «Нравится». ✅
Джордж - интерфейсный разработчик и цифровой дизайнер, живущий в Орегоне. Днем он работает инженером-программистом в команде систем проектирования ServiceNow. Ночью он постоянно перестраивает свою коллекцию видеоигр, чтобы отвлечься от игры.
