谷歌浏览器里面DOMNodeInserted和DOMNodeRemoved事件被移除修改

浮夸夸浮夸

已于 2024-09-09 11:08:50 修改

阅读量132

点赞数 2

文章标签：前端

于 2024-09-09 10:59:51 首次发布

本文链接：https://blog.csdn.net/weixin_38515695/article/details/142053224

版权

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')
    });