JS中onpropertychange和onchange事件區別小結_javascript技巧

來源:互聯網
上載者:User
也就是說:onpropertychange事件在用鍵盤每改變一下文字框的值或用js改變其值便會觸發一下,而onchange只有在用鍵盤改變其值,然後在失去焦點(onblur)後才觸發,用js改變其值不能觸發!onpropertychange和onchange都不管文字框中的實際值有沒有變,只要有改的相應操作就可能觸發。有時當上面兩時間都不能滿足需求時,可以考慮只用onblur。
還有一點要注意到,當onblur和onchange事件一起用時,onblur會出問題。。。。詳見如下
測試頁面:
<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>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.