监听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 model
        var options = { attributes: true, childList: true,subtree:true,attributeOldValue:true};
        var flag = true;
        //callback for MutationObserver
        function 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)
    }
}