监听输入框值的即时变-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_7030/article/details/81954211

本文档演示了如何使用JavaScript监听HTML元素的属性变化，并在属性被修改、添加或删除时触发相应的事件处理函数。此外，还展示了如何通过按钮操作来修改元素的对齐方式、背景颜色以及创建、修改和移除属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写道

<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>