DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument与MutationObserver的不同

Mutation Observer API 用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知。

概念上，它很接近事件，可以理解为 DOM 发生变动就会触发 Mutation Observer 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说，DOM 的变动立刻会触发相应的事件；Mutation Observer 则是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。

var oDiv = document.createElement("div");
oDiv.className = "oDiv";
var p = document.createElement("p");
p.className = "p";
var h1 = document.createElement("h1");
h1.className = "h1";

oDiv.addEventListener("DOMNodeInsertedIntoDocument",function(e){console.log("add");
});
oDiv.addEventListener("DOMNodeRemovedFromDocument",function(e){console.log("remove");
});p.addEventListener("DOMNodeRemovedFromDocument",function(e){console.log("remove");
});
p.addEventListener("DOMNodeInsertedIntoDocument",function(e){console.log("add");
});

document.body.appendChild(oDiv);//add oDiv
oDiv.appendChild(p);//add p
oDiv.innerHTML = "";//remove p
oDiv.appendChild(h1);//

由以上结果可以发现，添加元素和删除元素时触发的是此元素绑定的事件

无论使用事件还是MutationObserve，在把元素插入到父元素之前都需要先进行监听再绑定处理函数

var supportMutationObserver =  window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
supportMutationObserver = !!supportMutationObserver;
var mo = new MutationObserver(function(mutations){mutations.forEach(function(mutation){console.log(mutation.target);if(mutation.addedNodes.length > 0){console.log("add nodes");}if(mutation.removedNodes.length > 0){console.log("remove nodes");}})
});

一、mo.observe(document.body,{childList:true, subtree: true});

document.body.appendChild(oDiv);//add nodes  如果oDiv不添加到body，oDiv子元素的添加和删除不能监听
oDiv.appendChild(p);//add nodes
oDiv.innerHTML = "";//remove nodes
oDiv.appendChild(h1);//add nodes

二、mo.observe(oDiv,{childList:true, subtree: true});
document.body.appendChild(oDiv); //oDiv添加到body，oDiv子元素的添加和删除可以收到监听
oDiv.appendChild(p);//add nodes
oDiv.innerHTML = "";//remove nodes
oDiv.appendChild(h1);//add nodes

在截图中（一）和（二）中可以发现MutationObserve监听的元素为目标元素的子元素，mutation.target为添加和删除的元素的父元素。

所以在由DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument向MutationObserver迁移时，并不能单纯的替换掉事件监听的元素。

DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument与MutationObserver的不同相关推荐

现代浏览器观察者 Observer API 指南
前言前段时间在研究前端异常监控/埋点平台的实现. 在思考方案时,想到了浏览器自带的观察者以及页面生命周期API . 于是在翻查资料时意外发现,原来现代浏览器支持多达四种不同类型的观察者: Inter ...
Javascript中关于监听DOM元素状态的方法使用
Javascript中关于监听DOM元素状态的方法使用 MutationObserver MutationObserver是针对DOM元素的观察器,观察它体内增加/减少子(爷孙)节点,或者子节点的属性 ...
JavaScript 模拟事件触发
事件触发的模拟步骤 Step 1. document.createEvent(eventType) eventType 共5种类型:Events.HTMLEvents.UIEevents.MouseE ...
WebKit DOM Event (一)
DOM Event 规范 DOM Event 主要定义了三类接口: EventTarget, 所有DOM节点和XMLHttpRequest 都实现EventTarget接口 class EventTa ...
元素增删事件DOMNodeInserted和DOMNodeRemoved
监听元素变化的三种方法: 对于表单类型的控件,使用onchange事件最好. 使用DOMNodeInserted和DOMNodeRemoved事件使用定时器定时检测(下策) 有时需要给一个class ...
XSS插入绕过一些方式总结
0x00前言我们友情进行XSS检查,偶然跳出个小弹窗,其中我们总结了一些平时可能用到的XSS插入方式,方便我们以后进行快速检查,也提供了一定的思路,其中XSS有反射.存储.DOM这三类,至于具体每个 ...
xss漏洞学习心得（泪目）
XSS学习心得大杂烩背景 xss的定义 xss漏洞的分类 xss绕过技巧payload 常见的有: 绕过payload 背景领导给了我一些资产让我去测试,发现其中藏有不少的xss漏洞,含泪做一个总 ...
XSS————2、XSS bypass
0x00前言 XSS有反射.存储.DOM三种类型,不同类型的xss的危害各不相同,下面做一个简要说明: 数据流向: 反射型:浏览器-->后端-->浏览器存储型:浏览器-->后端-- ...
vue中v-on支持的事件总结
资源事件事件名称何时触发 error 资源加载失败时. abort 正在加载资源已经被中止时. load 资源及其相关资源已完成加载. beforeunload window,document 及 ...

DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument与MutationObserver的不同

DOMNodeInsertedIntoDocument和DOMNodeRemovedFromDocument与MutationObserver的不同相关推荐

最新文章

热门文章