jquery-3.3.1.min.js?version=1.0.0:3 [Deprecation] Listener added for a ‘DOMNodeInserted’ mutation event. Support for this event type has been removed, and this event will no longer be fired. See https://chromestatus.com/feature/5083947249172480 for more information.
第一种:
<body>
<button id="tid">test</button>
</body>
<script type="text/javascript" src="./jq.js"></script>
<script>
$(document).ready(() => {
setInterval(() => {
$("#tid").append(document.createElement('li'))
}, 1000)
$.fn.bind = function(types, data, fn) {
if (types === "DOMNodeInserted") {
const _this = this;
const observer = new MutationObserver(function (list) {
list.forEach(item => {
if (item.addedNodes) {
_this.trigger("DOMNODEINSERTED")
}
})
})
observer.observe(_this[0],{childList: true, subtree: true});
return _this.on("DOMNODEINSERTED",null, data, fn);
}
return this.on( types, null, data, fn );
};
$("#tid").bind('DOMNodeInserted', () => {
console.log("INSERTED")
})
})
</script>
第二种:
function handleObserver(dom) {
// 创建MutationObserver来观察DOM变化
const observer = new MutationObserver(function(mutationsList) {
mutationsList.forEach(function(mutation) {
if (mutation.type === 'childList') {
if (mutation.addedNodes.length > 0) {
dom.trigger(new CustomEvent('node-added'));
}
if (mutation.removedNodes.length > 0) {
dom.trigger(new CustomEvent('node-removed'));
}
}
});
});
// 开始观察
observer.observe(dom[0], { childList: true, subtree: true });
}
handleObserver($("#tid"));
// 监听新增节点
$("#tid").bind('node-added', function(event) {
console.log('INSERTED')
});