Usage of oninput, onpropertychange, onchange
The onchange trigger event must meet two conditions:
a) The properties of the current object change and are triggered by keyboard or mouse events (script triggering is invalid)
b) The current object loses focus (onblur);
In the case of onpropertychange, as long as the properties of the current object change, the event will be triggered, but it is exclusive to IE;
oninput is the non-IE browser version of onpropertychange. It supports browsers such as Firefox and Opera, but there is one difference. When it is bound to an object, not all property changes of the object can trigger events. It only changes when the object value changes. It worked.
Stop bubbling events
if (e) //Stop event bubbling e.stopPropagation();
else window.event.cancelBubble = true;
Execute the above code and click on the input box to find that onpropertychange will also be triggered. Entering a value will also trigger this event. This proves that as long as the value of a property is modified, this event will be triggered.
Second, now that we have discovered this feature, there will be a problem: sometimes when we want to perform a function operation when the input box value changes, we also need to modify a custom attribute, so onpropertychange will be Triggered twice, this may not be what we want.
Just guess, since such an attribute is provided, you should be able to get which attribute was changed. Try to get the number of parameters and their content.
XML/HTML code
Copy the code code as follows:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alert(arguments.length);
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
});
-->
</script>
Executing the above code, you will find that 1 and [object] pop up, which shows that the event only passes one parameter to the callback function and it is of type object.
Then let's try traversing this object.
XML/HTML code
Copy the code code as follows:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(var item in o){
alert(item+":"+o[item]);
}
});
//-->
</script>
After executing it, we find that there are many attributes, but if we look carefully, we may find such an attribute: propertyname. I believe everyone can guess the meaning of this attribute. Yes, this is used to get which attribute has been modified.
XML/HTML code
Copy the code code as follows:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alert(o.propertyName);
});
//-->
</script>
Click the text box and enter a value respectively, and you will find that myprop and value pop up respectively.
Going back to the question we started with, we only need to determine whether the value has been changed.
Let’s look at the code directly:
XML/HTML code
Copy the code code as follows:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //Do not perform the following operations unless the value changes
//.....Function processing
});
//-->
</script>