上接《这篇博文》，其应用于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树的更多相关文章

  1. 判定元素正在插入到DOM树——DOMNodeInsertedIntoDocument

    在firefox, webkit中我们可以使用DOMNodeInsertedIntoDocument事件,但这个事件很快变废弃了,虽然浏览器还是很有节操地支持它们,但哪一天不在也很难说.比如说fire ...

  2. 通过Ztree生成页面html元素Dom树,以及拖拽改变元素的位置

    zTree 是一款依靠 jQuery 实现的多功能 "树插件",http://www.treejs.cn/v3/main.php#_zTreeInfo,功能强大,不多赘述. 下面我 ...

  3. WebKit Inside: DOM树的构建

    当客户端App主进程创建WKWebView对象时,会创建另外两个子进程:渲染进程与网络进程.主进程WKWebView发起请求时,先将请求转发给渲染进程,渲染进程再转发给网络进程,网络进程请求服务器.如 ...

  4. DOM树操作

    DOM 操作 访问与树关系(节点) 绘制 DOM 树: childNodes, attributes 从一个中心元素访问其所有的直系亲属元素 访问父节点: parentNode 访问上一个兄弟节点: ...

  5. 从Chrome源码看浏览器如何构建DOM树

    .aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto } p { font-size: 1 ...

  6. JS的Dom树小结

    一[DOM树节点]  DOM节点分为三大类:元素节点.文本节点.属性节点 文本节点.属性节点,为元素节点的两个子节点:  通过getElement系列方法,可以去到元素节点.     二[查看节点] ...

  7. DOM树节点和事件

    一.前言:DOM树节点是JS的基础语句.通过节点,能够取到HTML代码中的任意标签,从而对其进行修改和添加各种视觉效果. 二.DOM树节点    DOM节点分为三大类: 元素节点,属性节点,文本节点  ...

  8. 深入解析浏览器的幕后工作原理(三) 呈现树和 DOM 树的关系

    呈现树和 DOM 树的关系 呈现器是和 DOM 元素相对应的,但并非一一对应.非可视化的 DOM 元素不会插入呈现树中,例如"head"元素.如果元素的 display 属性值为& ...

  9. 超全面的JavaWeb笔记day04<dom树等>

    1.案例:在末尾添加节点(*****) 创建标签 createElement方法 创建文本 createTextNode方法 把文本添加到标签下面 appendChild方法 2.元素对象(了解) 如 ...

随机推荐

  1. 关于HashMap，HashTable，HashSet浅析

    首先,最重要的,HashMap  作为一个我们使用非常多的集合.最常被大家认知的是,它是一个key-value形式存储数据的数据结构,可以实现快速的存,取操作.  关于HashMap的源码,我们截取一 ...

  2. New Concept English three （28）

    27w/m 87 Small boats loaded with wares sped to the great liner as she was entering the harbour. Befo ...

  3. TCP中的服务端与客户端的实现

    TCP中首先要在服务端开启监听,这样才可以从客户端链接 using System; using System.Collections.Generic; using System.Linq; using ...

  4. iOS在支持arc的工程中，导入不支持arc的第三方的插件

    首先将插件导入到工程中,然后点击工程名,在targets下面找到相应的条目,然后选择build phares,打开第二行compile sourses,然后找到不支持arc的.m文件,在后边添加上“- ...

  5. GCC参数使用

    gcc and g++分别是gnu的c & c++编译器 gcc/g++在执行编译工作的时候,总共需要4步 1.预处理,生成.i的文件[预处理器cpp] 2.将预处理后的文件不转换成汇编语言, ...

  6. 【ci框架学习】环境搭建

    系统 -- Ubuntu 14.0(虚拟机linux 实体机Windows) 目标环境 -- lnmp 附加内容: 1.目录共享(方便代码编写) 2.使用secure crt终端软件连接(便于操作,不 ...

  7. System.Web.HttpRequestValidationException: 从客户端(dbFlag=&quot;&lt;soap:Envelope xmlns...&quot;)中检测到有潜在危险的 Request.Form 值。

    System.Web.HttpRequestValidationException: 从客户端(dbFlag="<soap:Envelope xmlns...")中检测到有潜 ...

  8. return super(ParamValueInline,self).formfield_for_foreignkey(db_field,request,**kwargs)自己返回自己的父类

    作者:刘强胜链接:https://www.zhihu.com/question/30361435/answer/83940591来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  9. openfaas 架构介绍

     此为官方介绍   Overview of OpenFaaS Function Watchdog You can make any Docker image into a serverless fun ...

  10. 利用 Excel 写 C51 的宏定义

    利用 Excel 写 C51 的宏定义 填好占空比,自动生成宏. #define LIGHT_LEVEL_00 0xFF #define LIGHT_LEVEL_10 0xE5 #define LIG ...