原生js監聽input值改變事件

時間 2019-11-30

原文原文鏈接

哈哈哈，又來了，今天閒來無事，實驗了下原生js監聽input value值改變事件，下面就來講道說道：javascript

原本寫監聽input值便獲是用jquery的，以前的隨筆寫了，就是這個方法，地址：http://www.cnblogs.com/wteng/p/5434403.htmlhtml

$('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 確實傷前端的心了，可是必須解決啊，看代碼：java

首先ie8 沒有 addEventListener ，你們都知道因此就封裝了個函數處理下。而後以前的input事件在ie下沒用，因此換成了 propertychange ，這個propertychange 事件我再ie9以上，以及其餘的瀏覽器也試了下，呵呵都沒用。jquery

而後就加了判斷若是是ie8，就用propertychange，然仍是沒反應，測試發現想用冒泡惹的禍。試下只綁定input，啊能夠了~chrome

    //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;
            }
        }
    }