關于IE11綁定change事件的問題

從IE 4開始,document.all在IE中舉足輕重。比起document.getElementById()來說,document.all是IE方式

的獲取元素的引用的方法。盡管IE 5增加對DOM的支持,但document.all一直沿用至IE 10。而在Internet Explorer11中終于被廢棄了,這意味著在Internet Explorer11中使用document.all的方法將可能導致執(zhí)行失敗,盡管使用了document.all的代碼實際上還是可以工作。

另外一個要廢棄的是attachEvent()方法,該方法用于添加事件處理器,對應的detachEvent()用來移除事件處理器。這兩個方法將在Internet Explorer 11中刪除。移除這兩個方法需要改用如下邏輯:

前端頁面開發(fā)的很多情況下都需要實時監(jiān)聽文本框輸入,比如騰訊微博編寫140字的微博時輸入框hu9i動態(tài)顯示還可以輸入的字數。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現,但是這存在著一些不好的用戶體驗。比如onchange事件只在鍵盤或者鼠標操作改變對象屬性,且失去焦點時觸發(fā),腳本觸發(fā)無效;而onkeydown/onkeypress/onkeyup在處理復制、粘貼、拖拽、長按鍵(按住鍵盤不放)等細節(jié)上并不完善。

onpropertychange屬性可在某些情況下解決上面存在的問題,不用考慮是否失去焦點,不管js操作還是鍵盤鼠標手動操作,只要HTML元素屬性發(fā)生改變即可立即捕獲到。遺憾的是,onpropertychange為IE專屬的。其他瀏覽器下如果想要實現這一實時監(jiān)聽的需求,就要用到HTML5中的標準事件oninput,不過IE9以下的瀏覽器是不支持oninput事件的。

匯總onchange onpropertychange 和oninput事件的區(qū)別:



1、onchange事件與onpropertychange事件的區(qū)別:?



onchange事件在內容改變(兩次內容有可能還是相等的)且失去焦點時觸發(fā);onpropertychange事件卻是實時觸發(fā),即每增加或刪除一個字符就會觸發(fā),通過js改變也會觸發(fā)該事件,但是該事件IE專有。?



2、oninput事件與onpropertychange事件的區(qū)別:?



oninput事件是IE之外的大多數瀏覽器支持的事件,在value改變時觸發(fā),實時的,即每增加或刪除一個字符就會觸發(fā),然而通過js改變value時,卻不會觸發(fā);onpropertychange事件是任何屬性改變都會觸發(fā)的,而oninput卻只在value改變時觸發(fā),oninput要通過addEventListener()來注冊,onpropertychange注冊方式跟一般事件一樣。(此處都是指在js中動態(tài)綁定事件,以實現內容與行為分離) ,oninput支持FireFox2以上,chrome,Safari都支持,Opera10以上,IE9以上,onpropertychange僅支持IE10以下包括IE10



3、oninput與onpropertychange失效的情況:?



(1)oninput事件:

? ? ? ? ? a). 當腳本中改變value時,不會觸發(fā);

? ? ? ? ? b).從瀏覽器的自動下拉提示中選取時,不會觸發(fā)。?



(2)onpropertychange事件:當input設置為disable=true后,onpropertychange不會觸發(fā)。

所以我們需要綜合oninput和onpropertychange二者來實現文本區(qū)域實時監(jiān)聽的功能

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容