我想执行一个函数时，一些div或输入被添加到html。 这可能吗?
例如，添加了一个文本输入，然后应该调用函数。
当前回答
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// fired when a mutation occurs
console.log(mutations, observer);
// ...
});
// define what element should be observed by the observer
// and what types of mutations trigger the callback
observer.observe(document, {
subtree: true,
attributes: true
//...
});
完整解释:https://stackoverflow.com/a/11546242/6569224
其他回答
下面的例子改编自Mozilla Hacks的博客文章，并使用MutationObserver。
// 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();
浏览器支持:Chrome 18+， Firefox 14+， IE 11+， Safari 6+
或者你可以简单地创建你自己的事件，到处运行
$("body").on("domChanged", function () {
//dom is changed
});
$(".button").click(function () {
//do some change
$("button").append("<span>i am the new change</span>");
//fire event
$("body").trigger("domChanged");
});
完整的示例 http://jsfiddle.net/hbmaam/Mq7NX/
使用TrackChanges来检测html更改。 链接:https://www.npmjs.com/package/track-changes-js
例子
let button = document.querySelector('.button');
trackChanges.addObserver('buttonObserver', () => button);
trackChanges.addHandler('buttonObserver', buttonHandler);
function buttonHandler(button) {
console.log(`Button created: ${button}`);
}
8年后，这是我使用MutationObserver和RxJS的解决方案
observeDOMChange(document.querySelector('#dom-changes-here'))
.subscribe(val => log('DOM-change detected'));
与其他方法的主要区别是在DOM更改时触发CustomEvent，并通过以下特性侦听事件的恢复以有效地执行用户逻辑;
撤消连续的DOM更改，以防止执行过多 在给定的时间后停止观看 在停止监视DOM更改后删除事件侦听器/订阅者 观察一个框架(比如Angular)中发生的DOM变化是很有用的
import { fromEvent, timer} from 'rxjs';
import { debounceTime, takeUntil, tap } from 'rxjs/operators';
function observeDOMChange(el, options={}) {
options = Object.assign({debounce: 100, expires: 2000}, options);
const observer = new MutationObserver(list => {
el.dispatchEvent(new CustomEvent('dom-change', {detail: list}));
});
observer.observe(el, {attributes: false, childList: true, subtree: true });
let pipeFn;
if (options.expires) {
setTimeout(_ => observer.disconnect(), options.expires);
pipeFn = takeUntil(timer(options.expires));
} else {
pipeFn = tap(_ => _);
}
return fromEvent(el, 'dom-change')
.pipe(pipeFn, debounceTime(options.debounce));
}
在stackblitz演示。
在2022年发现了这个问题的解决方案。
我们已经看到了不同的解决方案，主要涉及MutationObserver。
如果有人想记录DOM更改并存储它们以便一段时间后重播，他们可以使用rrweb
编辑:
再举个例子，下面是一些提示:
rrweb您可以通过CDN或npm使用
让我们以CDN为例来记录DOM更改事件:
步骤1:只需在<HTML><head>标签中包含以下脚本标签
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.2/dist/rrweb-all.js" crossorigin="anonymous"></script> .js
步骤2:并在代码中添加以下代码以捕获rrweb生成的事件。
<script>
var events = [];
rrweb.record({
emit(event) {
events.push(event);
// you can store this event anywhere and you can replay them later. ex: some JSON file, or DB
}
});
</script>
这个例子主要用于记录任何web应用程序的事件。
如需详细了解(如何录制/回放)，请参阅rrweb文档。
重播的例子:
这是为了调试，但添加在这里，以便任何人都可以检查重放的一面:
重复的例子
