元素属性监听

做一个事件On_Attr_Change，监听元素属性的变化，以便属性变化的时候作出处理

 

<html>
    
    <head>
        <script>
            function AddListeners() {
                var elemToCheck = document.getElementById("myDiv");
                if (elemToCheck.addEventListener) { // Firefox, Opera and Safari
                    elemToCheck.addEventListener('DOMAttrModified', OnAttrModified, false);
                }
                else if (elemToCheck.attachEvent) { // Internet Explorer
                    elemToCheck.attachEvent('onpropertychange', OnAttrModified);
                }
            }

            function OnAttrModified(event) {
                var txt = "";
                if (event.attrChange) {
                    // Firefox, Safari, Opera
                    txt += "The element: " + event.target;
                    txt += "\nproperty: " + event.attrName;
                    txt += "\noriginal value: " + event.prevValue;
                    txt += "\n changed to: " + event.newValue;
                }
                else {
                    // Internet Explorer
                    txt += "The element: " + event.srcElement.tagName;
                    txt += "\nproperty: " + event.propertyName;

                    var elem = event.srcElement;
                    txt += "\nchanged value: " + elem.attributes[event.propertyName].value;
                }
                alert(txt);
            }

            function ChangeDDD() {
                var div = document.getElementById("myDiv");
                div.setAttribute("ddd", "New Attribute");
            }
        </script>
    </head>
    
    <body onload="AddListeners ();">
        <button onclick="ChangeDDD ();">Change ddd Attribute!</button>
        <div id="myDiv" ddd="Old Attribute">divdivdivdivdivdivdivdiv</div>
    </body>

</html>
posted @ 2012-01-13 15:50  fxair  阅读(413)  评论(0)    收藏  举报