上接《这篇博文》，其应用于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. matlab批量转化img到gray

    path = 'D:\宝贝儿数据集\COIL-3D\coil-100\'; save_path = 'D:\宝贝儿数据集\COIL-3D\coil-100-gray\'; file=dir([path ...

  2. 关于list.extend(iterable)

    extend内的参数只要是iterable就可以,那么也可以添加定制的iterable,开整. class A(object): def __init__(self): self.a = 0 def ...

  3. 数据分析笔试-sql

    题目说明及要求: 以下是模似数据库里的表单信息,请根据要求写出SQL语句 表1:职工信息 表结构如下: 表名:Employee 职工ID   职工姓名       入职年份       部门ID A1 ...

  4. LINUX TCP套接字详细配置

    提高服务器的负载能力,是一个永恒的话题.在一台服务器CPU和内存资源额定有限的情况下,最大的压榨服务器的性能,是最终的目的.要提高 Linux系统下的负载能力,可以先启用Apache的Worker模式 ...

  5. C语言词法分析:C#源码

    今天继续研究代码解析的算法 这个是算法流程图 有图解可能更直观一点: 以下是c#源码:   1using System;   2using System.IO;   3using System.Tex ...

  6. JS、Jquery获取浏览器和屏幕各种高度宽度

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  7. 使用 ip 进行系统网络配置

    检查是否有安装iproute工具 rpm -qa | grep iproute 查看所有可用接口 ip link show 启用或禁用接口 ip link set down eth1 ip link ...

  8. rac ASM下最简单归档开启/关闭方法

    原创作品,出自 “深蓝的blog” 博客,深蓝的blog:http://blog.csdn.net/huangyanlong/article/details/47172639本次先来介绍一下在rac环 ...

  9. TOP K问题的若干实现

    问题描述:在长度为n的序列中,找出其最大的K个数 1.冒泡排序 每冒泡一次,可将最大的数放到序列尾部,冒泡K次即可. 时间复杂度:O(K*n) 空间复杂度:O(1) 2.扫描数组,将最大的N个数存在缓 ...

  10. dx工具（android将jar包转成dex格式二进制jar包工具）

    博客分类: android 时钟 dx工具二进制jar包  好吧,不得不承认这个工具真心难找,也不知道自己sdk里以前怎么就有了,还好给了师傅一份,现在重装系统从网上找这个工具都找不到. 将platf ...