判定元素是否刚插入到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>

目前收集的数据如下:

浏览器 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。

你可能感兴趣的:(dom)