js中的onchange和onpropertychange (onchange無(wú)效的解決方法)
筆者注:今天我在用到onchange事件時(shí)沒(méi)有任何反應(yīng),最后翻查資料才知道Onchange的局限性和不穩(wěn)定性。而onpropertychange卻能很好的實(shí)現(xiàn)尤其是它的實(shí)時(shí)捕捉性能更是很值得用一下(幸虧有這個(gè)性能,做出的東西老板娘很滿意 o(∩_∩)o...)。
本人也比較懶,自己做的東西也懶的整理下來(lái)只能把搜索到的資料原版拿來(lái)個(gè)大家分享一下:
IE下,當(dāng)一個(gè)HTML元素的屬性改變的時(shí)候,都能通過(guò) onpropertychange來(lái)捕獲。例如一個(gè)
<input name="text1" id="text1" />
對(duì)象的value屬性被頁(yè)面的腳本修改的時(shí)候,onchange無(wú)法捕獲到,而onpropertychange卻能夠捕獲。(是實(shí)時(shí)性捕捉到的)
也就是說(shuō):onpropertychange能及時(shí)捕獲屬性值的變化,而onchange在屬性值改變時(shí)還必須使得當(dāng)前元素失去焦點(diǎn)(onblur)才可以激活該事件!
如:
例1:
請(qǐng)輸入圖片地址: <input type="text" name="mytext" size="10" value="" onpropertychange="document.images['myimg'].src=this.value;" /> <img id="myimg" src="/img/common/logo.gif" alt="" />
當(dāng)text框中的內(nèi)容被改變時(shí),圖片就會(huì)立刻被顯示出來(lái)。而如果用onchange時(shí),改變其值時(shí)還需用鼠標(biāo)單擊空白或其他地方使input元素失去焦點(diǎn)(onblur)才能激活該事件,圖片顯示才會(huì)被改變!
例2:
<INPUT id="image" style="WIDTH: 448px; HEIGHT: 22px" onpropertychange="preview.src=image.value" type="file" size="55" name="File1" runat="server">
<IMG id="preview" height="170" alt="" src="" width="256">
----------------------------------------------------------------
onpropertychange事件太可愛了,我對(duì)它一見鐘情
onChange:當(dāng)前元素失去焦點(diǎn)并且元素的內(nèi)容發(fā)生改變而觸發(fā)的事件 [鼠標(biāo)與鍵盤的觸發(fā)均可]
所以說(shuō)當(dāng)對(duì)象的value被腳本改變時(shí)不會(huì)觸發(fā)onChange事件,因?yàn)橛脩艏礇](méi)有動(dòng)鼠標(biāo)又沒(méi)動(dòng)鍵盤.
- javascript checkbox/radio onchange不能兼容ie8處理辦法
- Radio 單選JS動(dòng)態(tài)添加的選項(xiàng)onchange事件無(wú)效的解決方法
- jsp中select的onchange事件用法實(shí)例
- 純JavaScript實(shí)現(xiàn)獲取onclick、onchange等事件的值
- js 觸發(fā)select onchange事件代碼
- js觸發(fā)onchange事件的方法說(shuō)明
- JavaScript獲取onclick、onchange等事件值的代碼
- javascript開發(fā)中使用onpropertychange,oninput事件解決onchange事件的不足
- javascript中的 onchange事件詳解
相關(guān)文章
JavaScript多種圖形實(shí)現(xiàn)代碼實(shí)例
這篇文章主要介紹了JavaScript多種圖形實(shí)現(xiàn)代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06
利用Axios實(shí)現(xiàn)無(wú)感知雙Token刷新的詳細(xì)教程
在現(xiàn)代系統(tǒng)中,Token認(rèn)證已成為保障用戶安全的標(biāo)準(zhǔn)做法,然而,盡管許多系統(tǒng)采用了這種認(rèn)證方式,卻在處理Token刷新方面存在不足,導(dǎo)致用戶體驗(yàn)不佳,許多系統(tǒng)未能提供一種無(wú)縫的、用戶無(wú)感知的Token刷新機(jī)制,所以本文介紹了教你用Axios實(shí)現(xiàn)無(wú)感知雙Token刷新2024-08-08
JS實(shí)現(xiàn)數(shù)組刪除指定元素功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組刪除指定元素功能,涉及javascript數(shù)組遍歷、排序、判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
Sample script that displays all of the users in a given SQL
Sample script that displays all of the users in a given SQL Server DB...2007-06-06
用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果
用JavaScript實(shí)現(xiàn)仿Windows關(guān)機(jī)效果...2007-03-03
js調(diào)用webservice構(gòu)造SOAP進(jìn)行身份驗(yàn)證
這篇文章主要介紹了js調(diào)用webservice構(gòu)造SOAP進(jìn)行身份驗(yàn)證的相關(guān)資料,需要的朋友可以參考下2016-04-04

