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