JS determines a simple instance of a textbox content change event

The usage of the oninput onpropertychange, onchange

The onchange trigger must satisfy two conditions:

A) the property of the current object changes and is fired by a keyboard or mouse event (script trigger is invalid)

B) the current object loses focus (onblur);

Onpropertychange, as long as the current object property changes, will trigger an event, but it is IE exclusive;            

Stop bubbling events

If (e) // stop event bubbling e.toppropagation ();
Else  Window. The event. The cancelBubble = true;

Execute the above code and click the input box to find that onpropertychange will also be triggered. Entering a value will also trigger the event, which proves that the event will be triggered whenever the value of a property is changed.

XML/HTML code

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

If you execute the above code, you'll notice that 1 and [object] pop up, which means that the event passed only one argument to the callback function and that it was of type object.
So let's try walking through this object.

XML/HTML code

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

There are a lot of properties, but if we look closely, we may find one property: propertyname. I'm sure everyone can guess what this property means. Yeah, that's what we're going to use to get which property is modified.

XML/HTML code

<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 on the text box and enter a value respectively, and you will find that myprop and value pop up respectively.

Going back to the problem we started with, we just need to determine whether value has been changed or not.
Just look at the code:

XML/HTML code

<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;  //It is not value change that does not perform the following action & NBSP;  
//. Function handling & NBSP;  
});   
//-->  
</script>