监听输入框值的即时变
+ event.srcElement.tagName + " element has been changed.";
}
}
else { // Firefox, Opera
message += "Something has happened to an attribute of the " + event.target.tagName + " element.\n";
switch (event.attrChange) {
case MutationEvent.MODIFICATION:
message += "The value of the " + event.attrName + " attribute has been changed from "
+ event.prevValue + " to " + event.newValue + ".";
break;
case MutationEvent.ADDITION:
message += "The " + event.attrName + " attribute has been added to the element "
+ "with the value of " + event.newValue + ".";
break;
case MutationEvent.REMOVAL:
message += "The " + event.attrName + " attribute has been removed from the element."
+ "The value was " + event.prevValue + " previously.";
break;
}
;
}
alert(message);
}
function ModifyAlign() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.align == "right")
elemToCheck.align = "left";
else
elemToCheck.align = "right";
}
function ModifyBackgroundColor() {
var elemToCheck = document.getElementById("myDiv");
elemToCheck.style.backgroundColor = "#aaccee";
}
function CreateModifyRemoveAttr() {
var elemToCheck = document.getElementById("myDiv");
// when an attribute is created, the onpropertychange event is not fired
elemToCheck.setAttribute("newAttr", "firstValue");
// when the value of an attribute is modified, the onpropertychange event is fired
elemToCheck.setAttribute("newAttr", "secondValue");
// when an attribute is removed, the onpropertychange event is not fired
elemToCheck.removeAttribute("newAttr");
}
</script>
</head>
<body onload="InitListener ();">
<div id="myDiv" style="background-color:#e0c0a0;">
The alignment can be modified with the first button<br/>
The background color can be changed with the second button<br/>
Finally, with the third button you can create, modify and remove an attribute.
</div>
<br/><br/>
<button onclick="ModifyAlign ();">Modify the alignment</button>
<br/>
<button onclick="ModifyBackgroundColor ();">Modify the color of the background</button>
<br/>
<button onclick="CreateModifyRemoveAttr ();">Create, modify and remove an attribute</button>
</body>
</html>?
