Acionamento de eventos em alterações de atributos DOM

Muitos cenários exigem a detecção de alterações nos atributos DOM, como quando a origem de uma imagem muda ou o HTML de um div atualizações de conteúdo. O suporte do navegador para essa funcionalidade evoluiu ao longo do tempo.

Eventos de mutação DOM (legado)

No passado, os eventos de mutação DOM forneciam uma maneira de escutar alterações de atributos. Esses eventos incluíram:

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

No entanto, o suporte do navegador para eventos de mutação DOM era inconsistente, levando a sua descontinuação em 2012.

API MutationObserver

Como um substituto para eventos de mutação DOM, a API MutationObserver foi introduzida. MutationObserver oferece um método mais robusto e amplamente suportado para detectar alterações em atributos DOM e outros aspectos do DOM.

Usando MutationObserver, você pode criar uma instância de observador e especificar os tipos de alterações que deseja monitorar. O observador irá notificá-lo quando ocorrer qualquer alteração correspondente no DOM.

Aqui está um exemplo de como você pode usar MutationObserver para detectar alterações no atributo de origem de uma imagem:

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

Neste exemplo, o observador está configurado para observar o atributo src do nó de imagem e invocará o retorno de chamada especificado sempre que esse atributo for alterado.

jQuery Mutation Events Plugin

Se estiver usando jQuery, você pode aproveitar seu plugin Mutation Events como uma alternativa ao MutationObserver. Este plug-in fornece uma interface simplificada para lidar com alterações de atributos DOM e pode ser útil se você estiver interessado apenas em alterações de atributos específicos.

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

Ao utilizar MutationObserver ou o plug-in jQuery Mutation Events, você pode detectar efetivamente alterações nos atributos DOM e executar ações personalizadas em resposta a essas alterações.