DIV CSS 佈局教程網
設為首頁
加入收藏
首頁
HTML基礎知識
CSS入門知識
JavaScript入門知識
DIV+CSS佈局
WEB網站前端
網頁腳本
網頁SEO優化
網頁制作工具
DIV+CSS佈局教程網
>>
網頁腳本
>>
JavaScript入門知識
>>
關於JavaScript
>> JS中onpropertychange和onchange事件區別小結
JS中onpropertychange和onchange事件區別小結
編輯：關於JavaScript
也就是說：onpropertychange事件在用鍵盤每改變一下文本框的值或用js改變其值便會觸發一下，而onchange只有在用鍵盤改變其值，然後在失去焦點(onblur)後才觸發，用js改變其值不能觸發!onpropertychange和onchange都不管文本框中的實際值有沒有變，只要有改的相應操作就可能觸發。有時當上面兩時間都不能滿足需求時，可以考慮只用onblur。
還有一點要注意到，當onblur和onchange事件一起用時，onblur會出問題。。。。詳見如下
測試頁面：
<html> <head> <title>通過js改變文本框中的值後觸發的事件：onpropertychange事件 </title> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head> <body> <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> <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> <br><br> <br> <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> <br><br> <br> <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> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
上一頁:
轉換json格式的日期為Javascript對象的函數
下一頁:
Javascript(AJAX)解析XML的代碼(兼容FIREFOX/IE)
關於JavaScript
js讀寫COOKIE實現記住帳號或密碼的代碼(js讀寫COOKIE)
js COOKIE 記住帳號或密碼 用戶名: 密碼：記住密
js中window.open打開一個新的頁面
<!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Tra
js簡單網速測試方法完整實例
本文實例講述了js簡單網速測試方法。分享給大家供大家參考，具體如下：運行效果截圖如下：具體代碼如下：
相關文章
js根據地理坐標確定地圖中心位置
使用js和jquery獲取url及url參數的方法
使用js實現極速選擇輸入城市名
JS鼠標懸浮圖片左右箭頭點擊訪問上下頁
js動態改變字體大小實例
js獲取和設置元素屬性值
js字符串轉數組
使用jquery.easysector.js繪制百分比餅圖
JS中script標簽defer和async屬性的區別詳解
很實用的js選項卡切換效果
JavaScript基礎知識
JSON基礎
正則表達式
關於JavaScript
JavaScript技巧
jQuery入門知識
AJAX入門
JavaScript綜合知識
小編推薦
javascript中的緩動效果實現程序
javascript元素動態創建實現方法
javascript中window.open在原來的窗口中打開新的窗口(不同名)
純javascript實現分頁(兩種方法)
js阻止默認浏覽器行為與冒泡行為的實現代碼
JavaScript 保存數組到Cookie的代碼
javascript獲取網頁寬高方法匯總
node.js中的http.request.end方法教程使用說明詳解
JS HTML5實現拖拽移動列表效果
js表格排序實例分析（支持int,float,date,string四種數據類型）
熱門推薦
BootStrap的Datepicker控件使用心得分享
使用原生js實現頁面蒙灰(mask)效果示例代碼
原生js編寫基於面向對象的分頁組件
jQuery插件分享:幻燈展示和社會化媒體插件
JS作為值的函數用法示例
關於Ext中form移除textfield方法:hide(),setVisible(false)，remove()
js注意img圖片的onerror事件的分析
實現js保留小數點後N位的代碼
下載文件個別浏覽器文件名亂碼解決辦法
大家都在看
本地圖片預覽(支持IE6/IE7/IE8/Firefox3)經驗總結
Javascript 實現微信分享（QQ、朋友圈、分享給朋友）
CSS隱藏網頁滾動條的方法 包括橫向縱向滾動條
javascript管中窺豹 形參與實參淺析
使用jquery修改表單的提交地址基本思路
ATM取款機： 類 Spring IoC的一段程序注解
純CSS3制作漂亮帶動畫效果的主機價格表
網頁設計時超級鏈接target=_blank的使用
XML學習教程
|
jQuery入門知識
|
AJAX入門
|
Dreamweaver教程
|
Fireworks入門知識
|
SEO技巧
|
SEO優化集錦
|
Copyright ©
DIV+CSS佈局教程網
All Rights Reserved