900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 监听dom页面动态插入元素以及元素属性变化

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

时间:2019-12-22 09:37:42

相关推荐

监听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 changefunction 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)}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。