JavaScript侦听Html元素Attribute的变化

最新推荐文章于 2022-09-24 15:59:31 发布

海阔山遥-未知何处是潇湘

最新推荐文章于 2022-09-24 15:59:31 发布

阅读量1.4k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/gua_381091614/article/details/31412295

版权

前端开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

1、定义JQuery插件：
(function ($) {
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
        function isDOMAttrModifiedSupported() {
            var p = document.createElement('p');
            var flag = false;
            if (p.addEventListener) p.addEventListener('DOMAttrModified', function () {
                flag = true
            }, false);
            else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function () {
                flag = true
            });
            else return false;
            p.setAttribute('id', 'target');
            return flag;
        }

        $.fn.attrChange = function (callback) {
            if (MutationObserver) {
                var options = {
                    subtree: false,
                    attributes: true
                };

                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (e) {
                        callback.call(e.target, e.attributeName);
                    });
                });

                return this.each(function () {
                    observer.observe(this, options);
                });

            } else if (isDOMAttrModifiedSupported()) {
                return this.on('DOMAttrModified', function (e) {
                    callback.call(this, e.attrName);
                });
            } else if ('onpropertychange' in document.body) {
                return this.on('propertychange', function (e) {
                    callback.call(this, window.event.propertyName);
                });
            }
        }
    })(jQuery);

2、使用：监听方法将传入一个属性名称，根据名称判断哪个属性值进行了改变。
$(function () {
        $('.t-refresh').attrChange(function (attrName) {
            var contentArea = $(this).parent().parent().prev();
            if (attrName == 'class' && $(this).attr('class') == 't-icon t-refresh t-loading') {
                if (contentArea.offset().left == 0 && contentArea.offset().top == 0)
                    return false;
                $('#grid_splash').show().css({
                    height: contentArea.height(),
                    width: contentArea.width(),
                    left: contentArea.offset().left,
                    top: contentArea.offset().top,
                    opacity: 0.9
                });
            } else if (attrName == 'class' && $(this).attr('class') == 't-icon t-refresh') {
                $('#grid_splash').hide();
            }
        });
    });