oninput, onpropertychange, onchange usage
Two conditions must be met for the onchange trigger event:
a) The current object attributes are changed and are fired by keyboard or mouse events (the script trigger is invalid)
b) The current object loses focus (onblur);
For onpropertychange, an event will be triggered as long as the current object property changes, but it is exclusive to IE;
oninput is a non-IE browser version of onpropertychange, which supports browsers such as firefox and opera, but there is a little difference. When it is bound to an object, not all property changes of the object can trigger events. It only works when the object value changes.
Stop bubbling events
if (e) //Stop the event bubbles ();
else = true;
Execute the above code and click the input box to find that onpropertychange will also trigger. Entering a value will also trigger this event. This proves that as long as the value of the property is modified, the event will be triggered.
Second, since we have discovered this feature, there will be a problem: sometimes we want to perform a function operation when the input box value changes, but at the same time we also need to modify a custom property, so that the onpropertychange will be triggered twice, which may not be what we want.
Guess, since such a property is provided, it must be possible to obtain which property has been changed. Try to get the number of parameters and the content of the parameters.
XML/HTML Code
<input type="text" value="xxx" onclick="='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alert();
for(var i=0;i<;i++){
alert(arguments[i]);
}
});
-->
</script>
Execute the above code and you will find that 1 and [object] pop up, which means that the event only passes one parameter to the callback function and is of type object.
Then let's try traversing this object.
XML/HTML Code
<input type="text" value="xxx" onclick="='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 found that there are many attributes, but if we look closely, we may find such an attribute: propertyname. I believe everyone can guess the meaning of this attribute. Yes, this is used to obtain which attribute is modified.
XML/HTML Code
<input type="text" value="xxx" onclick="='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alert();
});
//-->
</script>
Click the text box and enter a value separately, and you will find that myprop and value pop up respectively.
Going back to the question we started, we just need to judge whether the value has been changed and it will be OK.
Just look at the code:
XML/HTML Code
<input type="text" value="xxx" onclick="='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(!='value')return; //If you do not change the value, do not perform the following operations.
//.......Function processing
});
//-->
</script>