上接《这篇博文》，其应用于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. 【tensorflow:Google】四、深层神经网络

    一.深度学习与深层神经网络 1.线性模型局限性 线性模型无论多少层,表达能力是一致的.可以通过激活函数实现非线性. 2.多层网络可以解决异或运算 二.损失函数定义 1.经典损失函数: 分类问题: 二分 ...

  2. JSP的指令

    JSP 指令 JSP指令用来设置整个JSP页面相关的属性,如网页的编码方式和脚本语言. 语法格式如下: <%@ directive attribute="value" %&g ...

  3. [转]页游开发中的 Python 组件与模式Presentation Transcript

    转: 页游开发中的 Python 组件与模式Presentation Transcript 1. 页游开发中的 Python 组件与模式 赖勇浩( http://laiyonghao.com ) 20 ...

  4. ArcGIS图例标注上标和下标

    1. 插入图例 在布局视图下,从插入中选择"图例",我们获得以下的样式: 2. 转为单个图形 选择图例,点击右键,选择"转化为图形",再次点击右键,点击&quo ...

  5. ORM 关键

    1. 老师的增删改查 1. teacher_obj.cid.add(*[1, 2, 3]) 添加(必须打散) 2. teacher_obj.cid.set([1, 2, 3]) 设置(不用打散) 2. ...

  6. LEX下出毛病的问题

    毛病! 1.今日写词法分析,回想起第一次写时候的蓝色警告:不要随便管理员.so,便Win+R,"cmd",回车. 2.在用lex写的时候,注意注释是 /*注释放于此处*/ 而非一般 ...

  7. [QT][问题]关于QT语言家使用失败的原因之一

    按照标准的qt使用教程 ( http://www.qter.org/forum.php?mod=viewthread&tid=781 ) 实践了下,发现除去主界面外,点开的窗口多语言没有问题. ...

  8. HohoCoder 1184 : 连通性二·边的双连通分量（+原理证明）

    1184 : 连通性二·边的双连通分量 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在基本的网络搭建完成后,学校为了方便管理还需要对所有的服务器进行编组,网络所的老师 ...

  9. python3 selenium 安装以及验证

    1. 相关链接 官方网站:http://www.seleniumhq.org GitHub:https://github.com/SeleniumHQ/selenium/tree/master/py ...

  10. 《DSP using MATLAB》示例Example7.17

    代码: M = 40; alpha = (M-1)/2; l = 0:M-1; wl = (2*pi/M)*l; T1 = 0.109021; T2 = 0.59417456; Hrs = [zero ...