淺析htmlinput等值改變添加監(jiān)聽事件

1、淺析html input等值改變添加監(jiān)聽事件要達到的效果很多情況下我們都會即時監(jiān)聽輸入框值的變化，以便 作出即時動作去引導(dǎo)瀏覽者增強網(wǎng)站的用戶體驗感。比如 即時顯示輸入框已經(jīng)被輸入的字節(jié)數(shù)，或者即時讀取輸入 的值來進行搜索引導(dǎo)，也就是google的關(guān)聯(lián)搜索效果等。 只要我們能捕獲即時事件就能做到很多事情。需要了解的知識首先，我們需要了解 onchange 和 onpropertychange 的不同：ie下，當一個html元素的屬性改變的時候，都能通過 onp ropertychan ge 來即時捕獲。o nchange在屬性值改變時還必須使得當前元素失去焦 點(onblu r)才可以激活該事

2、件。了解這一點后我們發(fā)現(xiàn)onproperty change的效果就是 我們想要的，可是很遺憾，它只在ie下有效果。我們能不 能找到另外一個時間來代替onprop ertychange呢？經(jīng)過翻閱資料得知，在其他瀏覽器下可以使用oninput 事件來達到同樣的效果，真是太好了，我們只需要把ie瀏 覽器區(qū)分出來就可以。oninput的使用下面我們先了解一下o ninput如何使用。下寫法就可以實現(xiàn)：it; 、 i nputtype=氣 ext"name二extfieldon input=zzaler t(t his .v alu e);onprope rtychange=，/ alert

3、 (this value)/gt;但是，將on inp ut寫在js代碼中分離出來時與普通事 件注冊的方法有些不同，必須使用addeventlis tener來注 ritl7j/j °attachevent 和 addeventli stener 的不同說到這里我們再來了解一下attacheven t和 addeventl istener 的使用方法：attache vent方法，為某一事件附加其它的處理事 件。(不支持mozilla系列)addeve ntlistener 方法用于 mozilla 系列 舉例：xml/htm lcode1. document getelementb

4、yldx_x_x. onclick二me thodl ;nbsp;nbsp;2. nbsp ;3. docume nt.geteleme ntbyldx x x (btn).onc lick=method 2; nbsp; nbsp ;4. nbsp;5 document. g etelementby idx_x_x(bt n) onclick =method3 ;nb sp; nbsp;如果這樣寫,那么將會只有medhot3被執(zhí)行 寫成這樣：xml/htm lcode1. va rbtnlobj二document. gete lementbyldx_x_x;nbsp;nbsp ;2. nbs

5、p;3btnlobjattachevent (“ onclick", methodl);nbsp ;nbsp;4. nbs p;5. btnlo bj. attachevent (onclick/z, method2) ; nbsp; nbsp;6. nbsp;7. btnlobj. att achevent (o nclick/z, met hod3) ;nbsp; nbsp;執(zhí)行順序為 method3-gt ;method2-gt jmethodl如果是mozilla系列，并不支持該方法，需要用至!j addeventl istenerxml/htmlcode1 . varbtn

6、lobj =document. g etelementby idx_x_x(btnl);nbsp;n bsp;2. nbsp;stener (/zcli.addeventli3. btnlobjck/z, methodi , false) ;nbs p;nbsp;4. nb sp;5. btnl obj. addeven tlistener (/z click", meth od2, false):nbsp:nbsp;6 nbsp;7. b tnlobj. adde ventlistene r ("click", m ethod3, fals e) ;nbsp;n

7、bs p;8. nbsp;9. 執(zhí)行順序為 meth odl-gt;meth od2gt;meth od3nbsp;nbs p;t解了如何使用addeventlis tener來注冊oni nput事 件后我們再回到要解決的問題劃分瀏覽器。判斷ie瀏覽器 如何將ie區(qū)分出來呢？這似乎是一個老生常談的問題，網(wǎng)絡(luò)中有很多找那個 方法，歸類為兩類：其一，是判斷瀏覽器的功能屬性。其二，就是判斷傳統(tǒng)的user-agent字符串，這可能是 最古老也是最流行的檢測方式。在這里就不做深入了解了，我們這里用一種比較簡單的方法來判斷xml/html code1. if （v二二v）nbspjnbsp;2. nbsp;3. n bspjalert （ie）;nbsp;n bsp;4. nbsp;5. elsenbs p;nbsp;6. nb sp;7. nbsp ; alert （z/n0/z） ; nbsp; nbsp ;8. nb