【难度较大】javascript 自定义事件

Question

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

On_Attr_Change = function(){
/* 自定义处理代码 */
}

Answer 1

兼容ie, Firefox, Opera and Safari

[code="html"]

<br> function AddListeners () {<br> var elemToCheck = document.getElementById (&quot;myDiv&quot;);<br> if (elemToCheck.addEventListener) { // Firefox, Opera and Safari<br> elemToCheck.addEventListener (&#39;DOMAttrModified&#39;, OnAttrModified, false);<br> } else if (elemToCheck.attachEvent) { // Internet Explorer<br> elemToCheck.attachEvent (&#39;onpropertychange&#39;, OnAttrModified);<br> }<br> }</p> <pre><code>function OnAttrModified (event) { var txt = &quot;&quot;; if (event.attrChange) { // Firefox, Safari, Opera txt += &quot;The element: &quot; + event.target; txt += &quot;\nproperty: &quot; + event.attrName; txt += &quot;\noriginal value: &quot; + event.prevValue; txt += &quot;\n changed to: &quot; + event.newValue; } else { // Internet Explorer txt += &quot;The element: &quot; + event.srcElement.tagName; txt += &quot;\nproperty: &quot; + event.propertyName; var elem = event.srcElement; txt += &quot;\nchanged value: &quot; + elem.attributes[event.propertyName].value; } alert (txt); } function ChangeDDD () { var div = document.getElementById (&quot;myDiv&quot;); div.setAttribute(&quot;ddd&quot;,&quot;New Attribute&quot;); } </code></pre> <p>


Change ddd Attribute!

divdivdivdivdivdivdivdiv

[/code]