上接《这篇博文》，其应用于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. php实现安装程序的 安装

    install.php 只要填写数据库就可以把数据插入到数据库中,实现安装 <?php header("Content-type:text/html;charset=utf-8&quo ...

  2. hihocoder-1486物品价值(状压dp)

    题目链接: 物品价值 小Hi现在有n个物品,每个物品都有一个价值.并且这n个物品总共有m个不同的属性,每个物品都具有其中若干属性. 小Ho要从中选出若干物品,满足每个属性都正好有奇数个物品拥有,且被选 ...

  3. asp.net 禁止回车输入

    //只在输入框禁止输入回车 if(event.keyCode==13&&event.srcElement.type=="textarea")    {        ...

  4. python tricks —— datetime 删除日期中的前导 0

    >> from datetime import datetime >> now = datetime.now() >> now.strftime('%Y-%m-%d ...

  5. C高级第一次作业附加

    之前的作业链接:http://www.cnblogs.com/1204113692yang/p/8625650.html 过去两周学习了指针的概念.指针变量的定义.指针的基本运算.指针操作改变主调函数 ...

  6. IOS socket编程--Asyncsocket

    iPhone的标准推荐是CFNetwork 库编程,其封装好的开源库是 cocoa AsyncSocket库,用它来简化CFNetwork的调用,它提供了异步操作 主要特性有: 队列的非阻塞的读和写, ...

  7. Java关闭线程的安全方法

    Java之前有一个api方法可以直接关闭线程,stop(),由于这个方法是强制性地关闭线程,有的时候会发生错误,之后就取消了,现在可用的方法主要有两种: 1.  在线程中加入一个成员变量,当一个fla ...

  8. Spring IOC容器的初始化—（一）Resource定位

    前言 上一篇博文“ Spring IOC是怎样启动的 ”中提到了refresh()方法,这个就是容器初始化的入口.容器初始化共有三个阶段: 第一阶段:Resource定位 第二阶段:BeanDefin ...

  9. 脚本工具---自动解析mysql建表语句，生成sqlalchemy表对象声明

    常规建表语句: CREATE TABLE `test_table` ( `id` int(11) NOT NULL, `name` char(64) NOT NULL, `password` char ...

  10. [Err] 1067 - Invalid default value for 'xxxTime'

    下面是导入sql脚本的的局部脚本 `xxxTime` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00', 发现是NO_ZERO_IN_DATE,NO_Z ...