Ruby's Louvre

每天学习一点点算法

导航

判定元素是否刚插入到DOM树

上接《这篇博文》，其应用于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>

目前收集的数据如下：

浏览器DOMNodeRemovedDOMNodeInserted
IE11okok
IE10okok
IE10的IE9模式okok
firefox25okok
chrome31okok
safar5.1.7okok

外国这篇文章提示说DOMNodeInserted有BUG。

posted on 2013-10-30 11:18  司徒正美  阅读(1932)  评论(1)  编辑  收藏  举报