Summary of the difference between onpropertychange and onchange events in JS_javascript skills

That is to say: the onpropertychange event will be triggered every time the value of the text box is changed with the keyboard or its value is changed with js, while onchange is only triggered when the value is changed with the keyboard and then loses focus (onblur). Using js Changing its value cannot be triggered! Both onpropertychange and onchange do not care whether the actual value in the text box has changed or not. As long as there is a corresponding change, it may be triggered. Sometimes when the above two times cannot meet the needs, you can consider only using onblur.
One more thing to note is that when onblur and onchange events are used together, onblur will cause problems. . . . See the following
test page for details:

<title>Event triggered after changing the value in the text box through js: onpropertychange event </title> <div id="test1"> <b>Test onpropertychange event and onchange event used together: </b> <br> <font color="red">Test results: The onpropertychange event is triggered every time the value of the text box is changed using the keyboard or its value is changed using js, while onchange is only triggered when the value is changed using the keyboard and then loses focus. Send, changing its value using js does not trigger </font> <br> <input name="haha1" type="text" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了onchange事件！')" size="30"> <input name="testbutton1" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha1').value='js改变文本框后的值'"> <br><br> <br> <div id="test2"> <b>When testing only onblur and onchange events: </b> <br> <font color="red">Test results: onchange is triggered first, then onblur is triggered </font> <br> <input name="haha2" type="text" onblur="alert('触发了onblur事件！')" onchange="alert('触发了onchange事件！')" size="30"> <input name="testbutton2" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha2').value='js改变文本框后的值'"> <br> <div> <br><br> <br> <div id="test3"> <b>Test when onblur and onpropertychange events are used together: </b> <br> <font color="red">Test results: There seems to be something wrong with onblur. Just use the keyboard to enter a value in the text box and it will be triggered. Maybe onpropertychange pissed it off. . . ^-^ </font> <br> <input name="haha3" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" size="30"> <input name="testbutton3" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha3').value='js改变文本框后的值'"> <br> <div> <br><br> <br> <div id="test4"> <b>The test has onblur, onpropertychange events and onchange events used together: </b> <br> <font color="red">Test results: The problem of onblur still exists when used together with onpropertychange </font> <br> <input name="haha4" type="text" onblur="alert('触发了onblur事件！')" onpropertychange="alert('触发了onpropertychange事件！')" onchange="alert('触发了 onchange事件！')" size="30"> <input name="testbutton4" value="通过js改变文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改变文本框后的值'"> <br> <div> <br><input onclick="runEx('runcode185')" type="button" value="运行代码"> <input onclick="doCopy('runcode185')" type="button" value="复制代码"> <input onclick="doSave(runcode185)" type="button" value="保存代码">[Ctrl A select all Note: <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">If you need to introduce external Js, you need to refresh to execute </a>]</div> </div> </div> </div> </div> </div> </div>