Wie kann ich Attributänderungen im DOM erkennen?-js-Tutorial-php.cn

Wie kann ich Attributänderungen im DOM erkennen?

Patricia Arquette

Freigeben： 2024-10-26 16:59:03

Original

510 Leute haben es durchsucht

How can I detect Attribute Changes in the DOM?

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!