Javascript DOM添加/删除事件[重复]
Posted
技术标签:
【中文标题】Javascript DOM添加/删除事件[重复]【英文标题】:Javascript DOM add/remove events [duplicate] 【发布时间】:2018-10-21 07:24:38 【问题描述】:我希望在从 DOM 树中删除一个元素时做一些清理工作,更具体地说,ParentElement.removeChild(ChildElement)
。我想知道当ChildElement
被删除时,是否有任何事件可以在我的代码中监听?
【问题讨论】:
【参考方案1】:是的,您可以使用 MutationObserver 监听对 DOM 的操作。
来自 MDN 文档的示例:
// Select the node that will be observed for mutations
var targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
var config = attributes: true, childList: true ;
// Callback function to execute when mutations are observed
var callback = function(mutationsList)
for(var mutation of mutationsList)
if (mutation.type == 'childList')
console.log('A child node has been added or removed.');
else if (mutation.type == 'attributes')
console.log('The ' + mutation.attributeName + ' attribute was modified.');
;
// Create an observer instance linked to the callback function
var observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();
【讨论】:
【参考方案2】:以前您可以使用像 DOMNodeRemoved
这样的突变事件,这些事件已被 MutationObserver 弃用:
var observer = new MutationObserver((mutations) =>
mutations.forEach((mutation) =>
const removedNodes = mutation.removedNodes;
// Cast NodeList to Array to have access to .includes method
if (Array.from(removedNodes).includes(childElement))
console.log('childElement removed');
)
);
observer.observe(document.getElementById('parentElement'),
childList: true
);
【讨论】:
以上是关于Javascript DOM添加/删除事件[重复]的主要内容,如果未能解决你的问题,请参考以下文章
在每个 DOM 更改“完成”时触发 javascript 事件