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

时间 2019-11-20

标签断定元素是否插入 dom 栏目 HTML 繁體版

原文原文链接

上接《这篇博文》，其应用于avalon的if绑定。若是一个节点尚未插入DOM树，那么avalon将延时对它进行扫描渲染，直到它再次插入到DOM树为止。因为CSS3 keyframe动画的复杂性，我仍是使用很挫的轮询方式来断定一个节点插入到DOM树。javascript

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提供了很是好的脚本，用于断定浏览器是否支持变更事件。php

document.implementation.hasFeature("MutationEvents", "2.0")

下面是一个完整的测试脚本，若是有IE9或其余标准浏览器的人，请帮忙把大家在控制台看到的打印日志提交给我（连同浏览器的类型与版本号）html

 <!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>

目前收集的数据以下：java

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