關于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)顯示還可以輸入的字數(shù)舵变。過去一般都使用onchange/onkeyup/onkeypress/onkeydown實現(xiàn)瘦穆,但是這存在著一些不好的用戶體驗赊豌。比如onchange事件只在鍵盤或者鼠標操作改變對象屬性,且失去焦點時觸發(fā)碘饼,腳本觸發(fā)無效;而onkeydown/onkeypress/onkeyup在處理復制住涉、粘貼钠绍、拖拽、長按鍵(按住鍵盤不放)等細節(jié)上并不完善五慈。

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

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



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



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



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



oninput事件是IE之外的大多數(shù)瀏覽器支持的事件朋腋,在value改變時觸發(fā)膜楷,實時的,即每增加或刪除一個字符就會觸發(fā)赌厅,然而通過js改變value時,卻不會觸發(fā)仲墨;onpropertychange事件是任何屬性改變都會觸發(fā)的揍障,而oninput卻只在value改變時觸發(fā),oninput要通過addEventListener()來注冊毒嫡,onpropertychange注冊方式跟一般事件一樣。(此處都是指在js中動態(tài)綁定事件努释,以實現(xiàn)內(nè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二者來實現(xiàn)文本區(qū)域實時監(jiān)聽的功能

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末灼芭,一起剝皮案震驚了整個濱河市有额,隨后出現(xiàn)的幾起案子彼绷,更是在濱河造成了極大的恐慌巍佑,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,451評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件萤衰,死亡現(xiàn)場離奇詭異热某,居然都是意外死亡腻菇,警方通過查閱死者的電腦和手機昔馋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來丘薛,“玉大人,你說我怎么就攤上這事邦危。” “怎么了倦蚪?”我有些...
    開封第一講書人閱讀 164,782評論 0 354
  • 文/不壞的土叔 我叫張陵陵且,是天一觀的道長。 經(jīng)常有香客問我,道長茬底,這世上最難降的妖魔是什么获洲? 我笑而不...
    開封第一講書人閱讀 58,709評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮最爬,結果婚禮上飞崖,老公的妹妹穿的比我還像新娘。我一直安慰自己固歪,他們只是感情好胯努,可當我...
    茶點故事閱讀 67,733評論 6 392
  • 文/花漫 我一把揭開白布叶沛。 她就那樣靜靜地躺著,像睡著了一般灰署。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上晦墙,一...
    開封第一講書人閱讀 51,578評論 1 305
  • 那天肴茄,我揣著相機與錄音,去河邊找鬼寡痰。 笑死,一個胖子當著我的面吹牛拦坠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播入热,決...
    沈念sama閱讀 40,320評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼莫湘!你這毒婦竟也來了郑气?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,241評論 0 276
  • 序言:老撾萬榮一對情侶失蹤忙芒,失蹤者是張志新(化名)和其女友劉穎讳侨,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體跨跨,經(jīng)...
    沈念sama閱讀 45,686評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡勇婴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,878評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了耕渴。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,992評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡础米,死狀恐怖添诉,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掏颊,我是刑警寧澤艾帐,帶...
    沈念sama閱讀 35,715評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站柒爸,受9級特大地震影響,放射性物質發(fā)生泄漏乐横。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,336評論 3 330
  • 文/蒙蒙 一罐农、第九天 我趴在偏房一處隱蔽的房頂上張望催什。 院中可真熱鬧涵亏,春花似錦蒲凶、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至孩等,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蹬癌。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評論 1 270
  • 我被黑心中介騙來泰國打工逝薪, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留隅要,地道東北人董济。 一個月前我還...
    沈念sama閱讀 48,173評論 3 370
  • 正文 我出身青樓虏肾,卻偏偏與公主長得像廓啊,于是被迫代替她去往敵國和親封豪。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,947評論 2 355

推薦閱讀更多精彩內(nèi)容