监听输入框值的即时变
写道
<html>
<head>
<script type="text/javascript">
function InitListener() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.addEventListener) { // Firefox, Opera, Google Chrome and Safari
elemToCheck.addEventListener('DOMAttrModified', OnAttrModified, false);
// Firefox, Opera
} else if (elemToCheck.attachEvent) { // Internet Explorer
elemToCheck.attachEvent('onpropertychange', OnAttrModified);
}
}
function OnAttrModified(event) {
if (event === undefined) { // Internet Explorer
event = window.event;
}
var message = "";
if (event.attrChange === undefined) {
if (event.propertyName === undefined) {
message = "Your browser does not support this example!";
}
else { // Internet Explorer
message = "The " + event.propertyName + " property of the "
+ 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>
<head>
<script type="text/javascript">
function InitListener() {
var elemToCheck = document.getElementById("myDiv");
if (elemToCheck.addEventListener) { // Firefox, Opera, Google Chrome and Safari
elemToCheck.addEventListener('DOMAttrModified', OnAttrModified, false);
// Firefox, Opera
} else if (elemToCheck.attachEvent) { // Internet Explorer
elemToCheck.attachEvent('onpropertychange', OnAttrModified);
}
}
function OnAttrModified(event) {
if (event === undefined) { // Internet Explorer
event = window.event;
}
var message = "";
if (event.attrChange === undefined) {
if (event.propertyName === undefined) {
message = "Your browser does not support this example!";
}
else { // Internet Explorer
message = "The " + event.propertyName + " property of the "
+ 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>