哈哈哈，又來了，今天閑來無事，實驗了下原生js監聽input value值改變事件，下面就來說道說道：
本來寫監聽input值便獲是用jquery的，之前的隨筆寫了，就是這個方法，地址：http://www.cnblogs.com/wteng/p/5434403.html
$('input').bind('input propertychange', function() {
//to do
})
現在用原生js來實現一遍（其實我翻了下jquery的監聽事件on的源碼，沒找到不知道他寫哪了），本來是我要用冒泡去監聽的整個form表單的input變化，然后 我這就這么寫了,結果 經測試，chrome、firefox、ie9以上正常，皆大歡喜。But 還有個ie8 （國情不可避免呀），看官請往下看
<body> <div id="form"> <p><input type="text" id="text1" /></p> <p><input type="text" /></p> <p><input type="text" /></p> <p><input type="text" /></p> <p><input type="text" /></p> <p><input type="text" /></p> <p><input type="text" /></p> <p><input type="text" /></p> </div> <script type="text/javascript"> var form=document.getElementById("form"); addEventListener(form,"input",function(e){ console.log(e); }) </script> </body>
ie8 確實傷前端的心了，但是必須解決啊，看代碼：
首先ie8 沒有 addEventListener ，大家都知道 所以就封裝了個函數處理下。然后之前的input事件在ie下沒用，所以 換成了 propertychange ，這個propertychange 事件我再ie9以上，以及其他的瀏覽器也試了下，呵呵都沒用。
然后就加了判斷如果是ie8，就用propertychange，然還是沒反應，測試發現想用冒泡惹的禍。試下只綁定input，啊可以了~
//var form=document.getElementById("form"); //ie8下這個玩意想冒泡還不行（也可能是我ie有問題，反正他不太正常） var form=document.getElementById("text1"); var hl="input"; if(navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i)=="8.") { //IE 8.0 hl="propertychange"; } addEvent(form,hl,function(e){ console.log(e); }) function addEvent(el,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 el.addEventListener(type,handle,false); }catch(e){try{ // IE8.0及其以下版本 el.attachEvent('on' + type,handle); }catch(e){ // 早期瀏覽器 el['on' + type] = handle; } } }
就這么多，如果想在ie8下也用冒泡只綁一次，那就靠你自己了寫代碼了
【轉載請注明出處】