Comment déclencher des événements lorsque les attributs DOM changent ?

Gestion des événements de changement d'attribut

Est-il possible d'activer un événement lorsqu'un attribut DOM change ? Par exemple, lorsque la source d'une image ou le code HTML interne d'une division est modifié ?

Les événements de mutation apportent une solution à ce problème. Bien que la prise en charge par le navigateur de ces événements soit limitée, ils offrent un moyen de surveiller les modifications d'attributs.

Plus précisément, vous pouvez utiliser l'interface MutationObserver en remplacement des événements de mutation. MutationObserver fournit une méthode plus standardisée et plus fiable pour observer les modifications du DOM, y compris les modifications d'attributs.

Voici comment utiliser MutationObserver pour déclencher un événement personnalisé lorsqu'un attribut change :

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      const element = mutation.target;
      const attributeName = mutation.attributeName;
      const oldValue = mutation.oldValue;
      const newValue = mutation.newValue;

      // Trigger custom event with relevant information
      element.dispatchEvent(new CustomEvent('attributeChanged', {
        detail: {
          attributeName,
          oldValue,
          newValue
        }
      }));
    }
  });
});

// Observe the DOM element for attribute changes
observer.observe(document.querySelector('#myElement'), { attributes: true });

En utilisant MutationObserver, vous pouvez suivre efficacement les modifications d'attributs et lancer des événements personnalisés en conséquence, vous permettant de répondre aux modifications dynamiques du DOM.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!