Mutation events

Mutation events fornecem um mecanismo, para uma página web ou uma extensão, de notificação sobre as alterações feitas no DOM. Utilize ao invés, se possível, Mutation Observers.

Prefácio

Os eventos de mutação foram marcados como em desuso na DOM Events specification pelo fato do projeto da API ser falho (veja detalhes no "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" publicado em public-webapps).

Mutation Observers são a proposta de substituição para eventos de mutação no DOM4. Eles devem ser incluídos no Firefox 14 e Chrome 18.

As razões práticas para evitar os eventos de mutação são problemas de desempenho e suporte cross-browser.

Performance

Adicionando listeners de mutação do DOM a um documento degrada o desempenho profundamente de outras modificações DOM para esse documento (tornando-os 1.5 - 7 vezes mais lento!). Além disso, remover os listeners não reverte o dano.

O efeito de desempenho é limitado aos documentos que têm os listeners de evento de mutação.

Suporte cross-browser

Esses eventos não são implementados de forma consistente entre os diferentes navegadores, por exemplo:

• IE anteriores à versão 9 não suportavam os eventos de mutação por completo e em alguns aspectos não implementa corretamente na versão 9 (por exemplo, DOMNodeInserted)
• WebKit não suporta DOMAttrModified (veja webkit bug 8191 e the workaround)
• "mutation name events", por exemplo DOMElementNameChanged e DOMAttributeNameChanged não são suportados no Firefox (a partir da versão 11), e provavelmente em outros navagedores também.
• ...

Dottoro suporte a eventos de mutação nos navegadores.

Lista de mutation events

Listado a seguir todos os eventos de mutação, como definido no DOM Level 3 Events specification:

• DOMAttrModified
• DOMAttributeNameChanged
• DOMCharacterDataModified
• DOMElementNameChanged
• DOMNodeInserted
• DOMNodeInsertedIntoDocument
• DOMNodeRemoved
• DOMNodeRemovedFromDocument
• DOMSubtreeModified

Uso

Você pode registrar um listener para eventos de mutação usando element.addEventListener, como mostrado a seguir:

element.addEventListener("DOMNodeInserted", function (event) {
  // ...
}, false);

O objeto event é transmitido para o listener em um MutationEvent (veja sua definição na especificação) para a maioria dos eventos, e MutationNameEvent para DOMAttributeNameChanged e DOMElementNameChanged.