要達到的效果
很多情況下我們都會即時監聽輸入框值的變化,以便作出即時動作去引導瀏覽者增強網站的用戶體驗感。比如即時顯示輸入框已經被輸入的字節數,或者即時讀取輸入的值來進行搜索引導,也就是google的關聯搜索效果等。
只要我們能捕獲即時事件就能做到很多事情。
需要了解的知識
首先,我們需要了解onchange和onpropertychange的不同:
IE下,當一個HTML元素的屬性改變的時候,都能通過 onpropertychange來即時捕獲。
onchange在屬性值改變時還必須使得當前元素失去焦點(onblur)才可以激活該事件。
了解這一點后我們發現onpropertychange的效果就是我們想要的,可是很遺憾,它只在IE下有效果。我們能不能找到另外一個時間來代替onpropertychange呢?
經過翻閱資料得知,在其他瀏覽器下可以使用oninput事件來達到同樣的效果,真是太好了,我們只需要把IE瀏覽器區分出來就可以。
oninput的使用
下面我們先了解一下oninput如何使用。
如果您是將注冊時間直接寫在頁面里面,那么如下寫法就可以實現:
<、input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
但是,將oninput寫在JS代碼中分離出來時與普通事件注冊的方法有些不同,必須使用addEventListener來注冊。
attachEvent和addEventListener 的不同
說到這里我們再來了解一下 attachEvent和addEventListener 的使用方法:
attachEvent方法,為某一事件附加其它的處理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
舉例:
- 綠毒越獄軟件 完美越獄4.21教程12-21
- htcg15怎么刷機?htcg15刷機教程12-21
- HTC hd7刷安卓2.2全教程12-21
- mpkg軟件下載和卸載的方法12-21
- 網站后臺系統設置的網站地址格式寫法07-09
- 防止重復提交js按鈕變灰07-09
- 不同時間顯示不同的廣告代碼07-09
- iframe框架調用高度自適應方法07-09
- 備份數據庫出現問題的解決方法07-09