上接《这篇博文》，其应用于avalon的if绑定。如果一个节点还没有插入DOM树，那么avalon将延时对它进行扫描渲染，直到它再次插入到DOM树为止。由于CSS3 keyframe动画的复杂性，我还是使用很挫的轮询方式来判定一个节点插入到DOM树。
https://github.com/RubyLouvre/avalon/blob/master/avalon.js#L1938
avalon(elem).addClass("fixMsIfFlicker")
var id = setInterval(function() {
if (root.contains(elem)) {
clearInterval(id)
ifcall()
avalon(elem).removeClass("fixMsIfFlicker")
}
}, 20)
今天一早与Aaron聊过后，决定试用DOMNodeInserted事件。因为Aaron提供了非常好的脚本，用于判定浏览器是否支持变动事件。
document.implementation.hasFeature("MutationEvents", "2.0")
下面是一个完整的测试脚本，如果有IE9或其他标准浏览器的人，请帮忙把你们在控制台看到的打印日志提交给我（连同浏览器的类型与版本号）
<!DOCTYPE HTML>
<html id="html">
<head>
<meta charset="utf-8">
<title>测试用例</title>
</head>
<body>
<h3>测试变动事件支持情况：</h3>
<table>
<tr>
<th>浏览器</th><th>DOMNodeRemoved</th><th>DOMNodeInserted</th>
</tr>
<tr>
<th>IE11</th><th>ok</th><th>ok</th>
</tr>
<tr>
<th>IE10</th><th>ok</th><th>ok</th>
</tr>
<tr>
<th>IE10的IE9模式</th><th>ok</th><th>ok</th>
</tr>
<tr>
<th>firefox25</th><th>ok</th><th>ok</th>
</tr>
<tr>
<th>chrome31</th><th>ok</th><th>ok</th>
</tr>
<tr>
<th>safar5.1.7</th><th>ok</th><th>ok</th>
</tr>
</table>
<div id="aaa"></div>
<script>
console.log(document.implementation && document.implementation.hasFeature("MutationEvents", "2.0"))
window.onload = function() {
var el = document.getElementById("aaa")
document.body.addEventListener("DOMNodeRemoved", function(e) {
console.log(e.type)
console.log(e.target.id)
})
document.body.addEventListener("DOMNodeInserted", function(e) {
console.log(e.type)
console.log(e.target.id)
})
var div = document.createElement("div")
div.id = "insert"
document.body.appendChild(div)
el.parentNode.removeChild(el)
}
</script>
</body>
</html>
目前收集的数据如下：
| 浏览器 | DOMNodeRemoved | DOMNodeInserted |
|---|---|---|
| IE11 | ok | ok |
| IE10 | ok | ok |
| IE10的IE9模式 | ok | ok |
| firefox25 | ok | ok |
| chrome31 | ok | ok |
| safar5.1.7 | ok | ok |
外国这篇文章提示说DOMNodeInserted有BUG。