快捷導(dǎo)航

JS中onpropertychange和onchange事件區(qū)別小結(jié)

更新時(shí)間：2010年07月11日 22:16:23 作者：

當(dāng)一個(gè)HTML元素的屬性用js改變的時(shí)候，都能通過(guò)onpropertychange來(lái)捕獲。例如一個(gè)文本text對(duì)象的value屬性被頁(yè)面的腳本修改的時(shí)候，onchange無(wú)法捕獲到，而onpropertychange卻能夠捕獲。

也就是說(shuō)：onpropertychange事件在用鍵盤(pán)每改變一下文本框的值或用js改變其值便會(huì)觸發(fā)一下，而onchange只有在用鍵盤(pán)改變其值，然后在失去焦點(diǎn)(onblur)后才觸發(fā)，用js改變其值不能觸發(fā)!onpropertychange和onchange都不管文本框中的實(shí)際值有沒(méi)有變，只要有改的相應(yīng)操作就可能觸發(fā)。有時(shí)當(dāng)上面兩時(shí)間都不能滿(mǎn)足需求時(shí)，可以考慮只用onblur。
還有一點(diǎn)要注意到，當(dāng)onblur和onchange事件一起用時(shí)，onblur會(huì)出問(wèn)題。。。。詳見(jiàn)如下
測(cè)試頁(yè)面：

<html> <head> <title>通過(guò)js改變文本框中的值后觸發(fā)的事件：onpropertychange事件 </title> </head> <body> <div   class="vvxyksv9kd"   id="test1"> <b>測(cè)試onpropertychange事件和onchange事件一起用時(shí)： </b> <br> <font color="red">測(cè)試結(jié)果：onpropertychange事件在用鍵盤(pán)每改變一下文本框的值或用js改變其值便會(huì)觸發(fā)一下，而onchange只有在用鍵盤(pán)改變其值，然后在失去焦點(diǎn)后才觸 發(fā)，用js改變其值不觸發(fā) </font> <br> <input name="haha1" type="text" onpropertychange="alert('觸發(fā)了onpropertychange事件！')" onchange="alert('觸發(fā)了onchange事件！')" size="30" > <input name="testbutton1" value="通過(guò)js改變文本框中的值" type="button" onclick="document.getElementById('haha1').value='js改變文本框后的值'"> <br><br> <br> <div   class="vvxyksv9kd"   id="test2"> <b>測(cè)試只有onblur和onchange事件時(shí)： </b> <br> <font color="red">測(cè)試結(jié)果：onchange先觸發(fā)，onblur后觸發(fā) </font> <br> <input name="haha2" type="text" onblur="alert('觸發(fā)了onblur事件！')" onchange="alert('觸發(fā)了onchange事件！')" size="30" > <input name="testbutton2" value="通過(guò)js改變文本框中的值" type="button" onclick="document.getElementById('haha2').value='js改變文本框后的值'"> <br> <div> <br><br> <br> <div   class="vvxyksv9kd"   id="test3"> <b>測(cè)試當(dāng)onblur和onpropertychange事件一起用時(shí)： </b> <br> <font color="red">測(cè)試結(jié)果：onblur好象出了問(wèn)題，只要用鍵盤(pán)在文本框中隨便輸入一個(gè)值，便會(huì)觸發(fā)它。可能是onpropertychange把它惹毛了。。。^-^ </font> <br> <input name="haha3" type="text" onblur="alert('觸發(fā)了onblur事件！')" onpropertychange="alert('觸發(fā)了onpropertychange事件！')" size="30" > <input name="testbutton3" value="通過(guò)js改變文本框中的值" type="button" onclick="document.getElementById('haha3').value='js改變文本框后的值'"> <br> <div> <br><br> <br> <div   class="vvxyksv9kd"   id="test4"> <b>測(cè)試有onblur、onpropertychange事件和onchange事件一起用時(shí)： </b> <br> <font color="red">測(cè)試結(jié)果：onblur在和onpropertychange一起用時(shí)的問(wèn)題仍然存在 </font> <br> <input name="haha4" type="text" onblur="alert('觸發(fā)了onblur事件！')" onpropertychange="alert('觸發(fā)了onpropertychange事件！')" onchange="alert('觸發(fā)了 onchange事件！')" size="30" > <input name="testbutton4" value="通過(guò)js改變文本框中的值" type="button" onclick="document.getElementById('haha4').value='js改變文本框后的值'"> <br> <div> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

您可能感興趣的文章: