JavaScript事件启动但未更新DOM

Question

在尝试为StackOverflow上的某个人解决问题时(特别是在这里)，我开始尝试使用JavaScript事件侦听器进行CSS3转换。HTML/CSS很简单，我设置了一个包含3个列表项的div，并让CSS与另一个div一起旋转，以便通过javascript放置新元素。

这里有一个链接到代码本身

HTML

<div id="list">
<span class="element">item1</span>
<span class="element">item2</span>
<span class="element">item3</span>
</div>
<div id="test">
</div>

CSS

.change {
overflow: hidden;
height: 58px;
color: black;
font-size: 3em;
}
.change span {
position: relative;
display: block;
animation: myAnim 10s ease infinite 0s;
-webkit-animation: myAnim 10s ease infinite 0s;
}

@keyframes myAnim {
0% { top: 0px; }
20% { top: 0px; }
35% { top: -58px; }
55% { top: -58px; }
70% { top: -116px; }
90% { top: -116px; }
100% { top: 0px; }
}

然而，JavaScript发生了一些有趣的事情。我的列表中有一个为animationiteration注册的侦听器，调用的函数向测试div添加了一个元素。问题是，在动画重置回1后，附加到列表中的元素以3为一组出现！它看起来好像函数被调用了3次，但它只在每3次调用时呈现给DOM。为什么会发生这种情况？

JavaScript

function listener(e) {
var list = document.getElementById("list");
var child = document.createElement('div');
child.innerHTML = "test";
document.getElementById("test").appendChild(child);
}
var change = document.getElementById("list");
change.addEventListener("animationiteration", listener, false);
change.className = "change";
console.log(change);

系统信息：

Firefox Version 27.0.1
ArchLinux

请注意，该演示仅适用于Firefox

更新1

我在index.html的第40行(JavaScript所在的位置)放置了一个断点，并确认listener确实在所有3个动画之后被调用，并且在这一点上被调用了3次(每次迭代一次)。所以现在的问题是，为什么它会这样？

Answer 1

这是因为#列表中有3个跨度，每个跨度都获得动画。试着只添加第四个跨度，就会出现4条"测试"消息。根据Mozilla开发人员网络的说法，"animationitation"气泡，因此将侦听器连接到父对象将触发与选择器匹配的子对象的次数