JS中onpropertychange事件和onchange事件區別

時間 2019-12-07

標籤 onpropertychange 事件 onchange 區別欄目 JavaScript 简体版

原文原文鏈接

當一個HTML元素的屬性用js改變的時候，都能經過 onpropertychange來捕獲。例如一個 <input name="text1" id="text1" />對象的value屬性被頁面的腳本修改的時候，onchange沒法捕獲到，而onpropertychange卻可以捕獲。
也就是說：onpropertychange事件在用鍵盤每改變一下文本框的值或用js改變其值便會觸發一下，而onchange只有在用鍵盤改變其值，而後在失去焦點(onblur)後才觸發，用js改變其值不能觸發!onpropertychange和onchange都無論文本框中的實際值有沒有變，只要有改的相應操做就可能觸發。有時當上面兩時間都不能知足需求時，能夠考慮只用onblur。

還有一點要注意到，當onblur和onchange事件一塊兒用時，onblur會出問題。。。。詳見以下

測試頁面：

html

<html>  
<head> <title>經過js改變文本框中的值後觸發的事件：onpropertychange事件 </title> </head>  
<body>  

<div id="test1">  
<b>測試onpropertychange事件和onchange事件一塊兒用時： </b> <br>  
<font color="red">測試結果：onpropertychange事件在用鍵盤每改變一下文本框的值或用js改變其值便會觸發一下，而onchange只有在用鍵盤改變其值，而後在失去焦點後才觸  

發，用js改變其值不觸發 </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>測試只有onblur和onchange事件時： </b> <br>  
<font color="red">測試結果：onchange先觸發，onblur後觸發 </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>測試當onblur和onpropertychange事件一塊兒用時： </b> <br>  
<font color="red">測試結果：onblur好象出了問題，只要用鍵盤在文本框中隨便輸入一個值，便會觸發它。多是onpropertychange把它惹毛了。。。^-^ </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>測試有onblur、onpropertychange事件和onchange事件一塊兒用時： </b> <br>  
<font color="red">測試結果：onblur在和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>  

</body>  
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。