Ereignisse bei DOM-Attributänderungen auslösen

In vielen Szenarien müssen Änderungen in DOM-Attributen erkannt werden, beispielsweise wenn sich die Quelle eines Bildes oder der HTML-Code eines Divs ändert Inhaltsaktualisierungen. Die Browserunterstützung für diese Funktionalität hat sich im Laufe der Zeit weiterentwickelt.

DOM-Mutationsereignisse (Legacy)

In der Vergangenheit boten DOM-Mutationsereignisse eine Möglichkeit, auf Attributänderungen zu warten. Zu diesen Ereignissen gehörten:

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

Die Browserunterstützung für DOM-Mutationsereignisse war jedoch inkonsistent, was dazu führte ihre Abschaffung im Jahr 2012.

MutationObserver API

Als Ersatz für DOM Mutation Events wurde die MutationObserver API eingeführt. MutationObserver bietet eine robustere und weithin unterstützte Methode zum Erkennen von Änderungen in DOM-Attributen und anderen Aspekten des DOM.

Mit MutationObserver können Sie eine Beobachterinstanz erstellen und die Arten von Änderungen angeben, die Sie überwachen möchten. Der Beobachter benachrichtigt Sie, wenn übereinstimmende Änderungen im DOM auftreten.

Hier ist ein Beispiel dafür, wie Sie MutationObserver verwenden können, um Änderungen am Quellattribut eines Bildes zu erkennen:

// 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"] });

In diesem Beispiel ist der Beobachter so konfiguriert, dass er das src-Attribut des Bildknotens überwacht und den angegebenen Rückruf aufruft wann immer sich dieses Attribut ändert.

jQuery Mutation Events Plugin

Wenn Sie jQuery verwenden, können Sie das Mutation Events Plugin als Alternative zu MutationObserver nutzen. Dieses Plugin bietet eine vereinfachte Schnittstelle für die Handhabung von DOM-Attributänderungen und kann nützlich sein, wenn Sie nur an bestimmten Attributänderungen interessiert sind.

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

Durch die Verwendung von MutationObserver oder dem jQuery Mutation Events-Plugin können Sie Änderungen in DOM-Attributen effektiv erkennen und benutzerdefinierte Aktionen als Reaktion auf diese Änderungen ausführen.