1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
---
title: Mutation events
slug: Web/Guide/Events/Mutation_events
translation_of: Web/Guide/Events/Mutation_events
---
<p>{{deprecated_header()}}</p>
<p><strong>Mutation events</strong> fornecem um mecanismo, para uma página web ou uma extensão, de notificação sobre as alterações feitas no DOM. <span style="background-color: #ffff00;">Utilize ao invés, se possível, <a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>.</span></p>
<h2 id="Prefácio">Prefácio</h2>
<p>Os eventos de mutação foram marcados como em desuso na <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events specification</a> 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 <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a>)</span>.</p>
<p id="Replacement.3A_mutation_observers"><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> são a proposta de substituição para eventos de mutação no DOM4. Eles devem ser incluídos no Firefox 14 e <a class="external" href="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers" title="http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers">Chrome 18</a>.</p>
<p>As razões práticas para evitar os eventos de mutação são <strong>problemas de desempenho</strong> e suporte <strong>cross-browser.</strong></p>
<h3 id="Performance">Performance</h3>
<p>Adicionando listeners de mutação do DOM a um documento <a class="external" href="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1" rel="external" title="http://groups.google.com/group/mozilla.dev.platform/browse_thread/thread/2f42f1d75bb906fb?pli=1">degrada o desempenho profundamente</a> 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.</p>
<p>O efeito de desempenho é <a class="link-https" href="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA" title="https://groups.google.com/forum/#!topic/mozilla.dev.platform/UH2VqFQRTDA">limitado aos documentos que têm os listeners de evento de mutação</a>.</p>
<h3 id="Suporte_cross-browser">Suporte cross-browser</h3>
<p>Esses eventos não são implementados de forma consistente entre os diferentes navegadores, por exemplo:</p>
<ul>
<li>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 (<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">por exemplo, DOMNodeInserted</a>)</li>
<li>WebKit não suporta DOMAttrModified (veja <a class="link-https" href="https://bugs.webkit.org/show_bug.cgi?id=8191" title="https://bugs.webkit.org/show_bug.cgi?id=8191">webkit bug 8191</a> e <a class="external" href="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen" title="http://about.silkapp.com/page/Mutation%20Events:%20What%20Happen">the workaround</a>)</li>
<li>"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.</li>
<li>...</li>
</ul>
<p>Dottoro <a class="external" href="http://help.dottoro.com/ljfvvdnm.php#additionalEvents" title="http://help.dottoro.com/ljfvvdnm.php#additionalEvents">suporte a eventos de mutação nos navegadores</a>.</p>
<h2 id="Lista_de_mutation_events">Lista de mutation events</h2>
<p>Listado a seguir todos os eventos de mutação, como definido no <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Level 3 Events specification</a>:</p>
<ul>
<li><code>DOMAttrModified</code></li>
<li><code>DOMAttributeNameChanged</code></li>
<li><code>DOMCharacterDataModified</code></li>
<li><code>DOMElementNameChanged</code></li>
<li><code>DOMNodeInserted</code></li>
<li><code>DOMNodeInsertedIntoDocument</code></li>
<li><code>DOMNodeRemoved</code></li>
<li><code>DOMNodeRemovedFromDocument</code></li>
<li><code>DOMSubtreeModified</code></li>
</ul>
<h2 id="Uso">Uso</h2>
<p>Você pode registrar um listener para eventos de mutação usando <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a>, como mostrado a seguir:</p>
<pre><code>element.addEventListener("DOMNodeInserted", function (event) {</code>
// ...
<code>}, false);</code>
</pre>
<p>O objeto event é transmitido para o listener em um {{ domxref("MutationEvent") }} (veja <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent" title="http://www.w3.org/TR/DOM-Level-3-Events/#events-MutationEvent">sua definição na especificação</a>) para a maioria dos eventos, e {{ domxref("MutationNameEvent") }} para <code>DOMAttributeNameChanged</code> e <code>DOMElementNameChanged</code>.</p>
|
