Wie kann ich Attributänderungen im DOM erkennen?

Attributänderungen im DOM erkennen

Frage:

Ist es möglich, eine zu initiieren? Ereignis, beispielsweise ein benutzerdefiniertes Ereignis, wenn sich ein Attribut eines HTML-Elements ändert? Genauer gesagt, wenn das src-Attribut eines Bildelements () oder das innerHTML-Attribut eines Divisionselements (

) geändert wird?

Antwort:

Mutationsereignisse (veraltet)

In der Vergangenheit wurden DOM-Mutationsereignisse zur Überwachung von Attributänderungen verwendet. Sie sind jedoch seit 2012 veraltet. Ihr Ersatz, MutationObserver, wird empfohlen.

MutationObserver

MutationObserver ist eine erweiterte API, mit der Sie Änderungen am DOM beobachten können . Es bietet eine feinkörnigere Kontrolle als Mutationsereignisse und ermöglicht Ihnen die Verfolgung spezifischer Elemente, Mutationen und Baumstrukturen.

Beispiel mit MutationObserver:

<code class="javascript">// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Check if the mutation is an attribute change
    if (mutation.type === "attributes") {
      console.log(`Attribute changed on ${mutation.target.nodeName}`);
    }
  }
});

// Start observing the document body for attribute changes
observer.observe(document.body, { attributes: true });</code>

jQuery Event Plugin

Das Mutation Events Plugin für jQuery kann auch zur Erkennung von Attributänderungen verwendet werden. Es bietet eine benutzerfreundlichere API für grundlegende Anwendungsfälle.

Beispiel mit jQuery Mutation Events Plugin:

<code class="javascript">$("img").on("attrchange", (e) => {
  console.log(`Image src changed to ${e.target.src}`);
});</code>

Hinweis:

Die Browserunterstützung für DOM-Mutationsereignisse variiert. Es wird immer empfohlen, die Kompatibilität zu überprüfen, bevor Sie sich auf diese Funktionalität verlassen.

Das obige ist der detaillierte Inhalt vonWie kann ich Attributänderungen im DOM erkennen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery html for Attribute Event dom this innerHTML

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn