blob: 732cb7614b6876ec45647bd5f07bd79283daf6fd (
plain)
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
63
|
---
title: Mutation events
slug: orphaned/Web/Guide/Events/Mutation_events
translation_of: Web/Guide/Events/Mutation_events
original_slug: Web/Guide/Events/Mutation_events
---
<p>{{deprecated_header()}}</p>
<p><strong>Mutation 事件 </strong>为web页面提供一种机制或扩展，以便在DOM被改变时获得通知。<span style="background-color: #ffff00;">如果可能请用<a href="/en-US/docs/Web/API/MutationObserver" title="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a>代替。</span></p>
<h2 id="前言">前言</h2>
<p id="Replacement.3A_mutation_observers">这个 mutation 事件在<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#events-mutationevents">DOM Events 标准</a> 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 <span id="to"><a class="external" href="http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/0779.html">public-webapps</a> 的</span>"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" <span id="to">)</span>. </p>
<p><a href="/en-US/docs/Web/API/MutationObserver">Mutation Observers</a> 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and <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>避免用mutation事件的实际原因是<strong>性能问题</strong>和<strong>跨浏览器支持</strong>。</p>
<h3 id="性能">性能</h3>
<p>为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能（慢1.5 - 7倍），此外, 移除监听器不会逆转的损害。</p>
<p>性能好坏 <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">限制了文档拥有mutation事件监听</a>.</p>
<h3 id="跨浏览器支持">跨浏览器支持</h3>
<p>这些事件在不同的浏览器实现并不一致, 例如:</p>
<ul>
<li>IE9之前的版本不支持mutation 事件而且在IE9版本中没有正确实现其中某些事件(<a class="external" href="http://help.dottoro.com/ljmcxjla.php" title="http://help.dottoro.com/ljmcxjla.php">例如, DOMNodeInserted</a>)</li>
<li>WebKit 不支持 DOMAttrModified (见 <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> 和 <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", i.e. DOMElementNameChanged 和 DOMAttributeNameChanged 在Firefox中不被支持 (到 version 11), 可能其他浏览器也是这样.</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">documents browser support for mutation events</a>.</p>
<h2 id="Mutation_事件列表">Mutation 事件列表</h2>
<p>下面是所有 mutation 事件列表, <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="使用">使用</h2>
<p>你可以如下所示使用<a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">element.addEventListener</a> 注册一个mutation 事件监听器:</p>
<pre><code>element.addEventListener("DOMNodeInserted", function (ev) {</code>
// ...
<code>}, false);</code>
</pre>
<p>事件对象在 {{ domxref("MutationEvent") }}传递给监听器 (见 <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">its definition in the specification</a>) 对于大多数的事件, 和 {{ domxref("MutationNameEvent") }} 用于 <code>DOMAttributeNameChanged</code> and <code>DOMElementNameChanged</code>.</p>
|
