A simple example of JS judging text box content change event_javascript skills

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

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 the object value. Works when change occurs.

Stop bubbling events

if (e) //Stop event bubbling e.stopPropagation();

else window.event.cancelBubble = true;

Execute the above code, click on the input box and 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, which may not be what we want.

Just guess, since such an attribute is provided, you should be able to get which attribute has been changed. Try to get the number of parameters and their content.

XML/HTML code

Copy code The code is as follows:

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 it is of type object.
Then let’s try traversing this object.

XML/HTML code

Copy code The code is as follows:

Execute it and 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 code The code is as follows:

Click 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 only need to determine whether the value has been changed.

Let’s look at the code directly:

XML/HTML code

Copy code The code is as follows: