首先,我們需要了解onchange和onpropertychange的不同:
IE下,當(dāng)一個HTML元素的屬性改變的時候,都能通過 onpropertychange來即時捕獲。
onchange在屬性值改變時還必須使得當(dāng)前元素失去焦點(diǎn)(onblur)才可以激活該事件。
了解這一點(diǎn)后我們發(fā)現(xiàn)onpropertychange的效果就是我們想要的,可是很遺憾,它只在IE下有效果。我們能不能找到另外一個時間來代替onpropertychange呢?
經(jīng)過翻閱資料得知,在其他瀏覽器下可以使用oninput事件來達(dá)到同樣的效果,真是太好了,我們只需要把IE瀏覽器區(qū)分出來就可以。
oninput的使用下面我們先了解一下oninput如何使用。
如果您是將注冊時間直接寫在頁面里面,那么如下寫法就可以實(shí)現(xiàn):
- <input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />
復(fù)制代碼但是,將oninput寫在JS代碼中分離出來時與普通事件注冊的方法有些不同,必須使用addEventListener來注冊。
attachEvent和addEventListener 的不同說到這里我們再來了解一下 attachEvent和addEventListener 的使用方法:
attachEvent方法,為某一事件附加其它的處理事件。(不支持Mozilla系列)
addEventListener方法 用于 Mozilla系列
舉例:
- document.getElementById("btn").onclick = method1;
- document.getElementById("btn").onclick = method2;
- document.getElementById("btn").onclick = method3;
復(fù)制代碼如果這樣寫,那么將會只有medhot3被執(zhí)行
寫成這樣:
- var btn1Obj = document.getElementById("btn1");
- btn1Obj.attachEvent("onclick",method1);
- btn1Obj.attachEvent("onclick",method2);
- btn1Obj.attachEvent("onclick",method3);
復(fù)制代碼執(zhí)行順序?yàn)閙ethod3->method2->method1
如果是Mozilla系列,并不支持該方法,需要用到addEventListener
- var btn1Obj = document.getElementById("btn1");
- btn1Obj.addEventListener("click",method1,false);
- btn1Obj.addEventListener("click",method2,false);
- btn1Obj.addEventListener("click",method3,false);
- 執(zhí)行順序?yàn)閙ethod1->method2->method3
復(fù)制代碼