Вызов событий при изменении атрибутов DOM

Многие сценарии требуют обнаружения изменений в атрибутах DOM, например, при изменении источника изображения или HTML-кода div обновления контента. Поддержка этой функции в браузере со временем развивалась.

События мутации DOM (устаревшие версии)

В прошлом события мутации DOM предоставляли возможность прослушивать изменения атрибутов. Эти события включали в себя:

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

Однако поддержка браузером событий мутации DOM была непоследовательной, что приводило к их поддержка прекращена в 2012 году.

MutationObserver API

В качестве замены событий DOM Mutation Events был представлен API MutationObserver. MutationObserver предлагает более надежный и широко поддерживаемый метод обнаружения изменений в атрибутах DOM и других аспектах DOM.

Используя MutationObserver, вы можете создать экземпляр наблюдателя и указать типы изменений, которые вы хотите отслеживать. Наблюдатель уведомит вас, когда в DOM произойдут какие-либо соответствующие изменения.

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

// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });

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

Плагин событий мутации jQuery

Если вы используете jQuery, вы можете использовать его плагин событий мутации в качестве альтернативы MutationObserver. Этот плагин предоставляет упрощенный интерфейс для обработки изменений атрибутов DOM и может быть полезен, если вас интересуют только изменения определенных атрибутов.

$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});

Используя MutationObserver или плагин jQuery Mutation Events, вы можете эффективно обнаруживать изменения в атрибутах DOM и выполнять специальные действия в ответ на эти изменения.