监听dom页面动态插入元素以及元素属性变化

工作中埋码需求，当某些动态插入的元素出现时触发埋码事件，因此需要对插入元素的父节点进行监听，子节点发生变化时触发相应埋码逻辑。

方法一：

(function () {//事件触发时执行埋码内容function do_track() {if ($("#LXB_CONTAINER > ins.lxb-cb-tip.lxb-cb-tip-feedback > ins.lxb-cb-tip-con > ins.success-tip-phone") && eventflag) {//ptengine event api，用户可以自定义eventName_pt_sp_2.push('setCustomEvent', {eventName: '事件名称',isActiveElement: 1});eventflag = false;if (timer) { clearInterval(timer) }}}try {var eventflag = true;var message_box = document.querySelector("#va");//以下代码为监控整个Body元素的变化var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;if (MutationObserver) {var MutationObserverConfig = {childList: true,subtree: true,};var observer = new MutationObserver(function (mutations) {do_track();});observer.observe(message_box, MutationObserverConfig);}else if (message_box.addEventListener) {message_box.addEventListener("DOMSubtreeModified", function (evt) {do_track();}, false);}else {var timer = setInterval(function () {do_track();}, 1000)}} catch (error) {}
})()

方法二(监听元素属性值的变化触发相应逻辑)：

//listener active element attribute change
function eventBinding(){try{$('.js-dlpo_modal-open').on('click', function() {$('.js-dlpo_modal').fadeIn();return false;});var targetNode = document.querySelector('#popup-dlpo01');//options listener modelvar options = { attributes: true, childList: true,subtree:true,attributeOldValue:true};var flag = true;//callback for MutationObserverfunction callback(mutationsList, observer) {if(document.querySelector('.js-dlpo_modal').style.display == 'block' && flag){$('.js-dlpo_modal-close').on('click', function() {$('.js-dlpo_modal').fadeOut();return false;});flag = false;}else if(document.querySelector('.js-dlpo_modal').style.display == 'none'){flag = true;}}var mutationObserver = new MutationObserver(callback);if(targetNode){mutationObserver.observe(targetNode, options);}}catch(e){console.log('pterror:'+e)}
}

监听dom页面动态插入元素以及元素属性变化相关推荐

动态监听DOM元素的高度
1.背景考虑这样一种情况,产品同学希望达到以下功能: 在我们的网页中有一个固定区域,这个区域会用于渲染从后端拉取的含有图片等资源的富文本字符串. 他需要在内容不超过一个最大高度的时候完全显示所有内容 ...
Vue + Element UI——监听DOM元素高度和宽度解决方案整理（八种方法）
问题描述监听DOM元素大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表. 解决方案方法一: 监听window变化 ...
JS实时监听DOM元素变化 - MutationObserver
使用 MutationObserver API实时监听DOM元素变化创建 MutationObserver 实列,接受一个用于监听到DOM元素变化的回调函数 const handleListenCh ...
vue监听dom元素变化修改echar图表
文章目录前言一.install监听依赖二.使用步骤 1.监听指定id并修改echarts宽高监听Windows窗口变化前言提示:这里可以添加本文要记录的大概内容: vue中监听dom元素变 ...
JavaScript监听DOM节点变化事件
JS监听页面DOM节点的变化 DOMSubtreeModified DOMNodeInserted DOMNodeRemoved DOMNodeInsertedIntoDocument DOMNode ...
Javascript中关于监听DOM元素状态的方法使用
Javascript中关于监听DOM元素状态的方法使用 MutationObserver MutationObserver是针对DOM元素的观察器,观察它体内增加/减少子(爷孙)节点,或者子节点的属性 ...
MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
vue之监听DOM事件
在vue中也有监听DOM事件,比如这样一个场景,我们输完一个名字之后点击一个按钮获取一个花名,或者牛X的名字代码如下: 代码中:@click可写成v-on:click,不同的写法. 页面效果如下执行 ...
js 监听dom属性的变化，如id，class
tinymce中的颜色选择器,选择后只有下划线变了颜色,UI要求字体也变色.下划线和上面的字母都是svg中的path,没有change之类的事件可以监听. <editor@onInit=&quo ...

监听dom页面动态插入元素以及元素属性变化

监听dom页面动态插入元素以及元素属性变化相关推荐

最新文章

热门文章