JavaScript偵聽Html元素Attribute的變化

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