原生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;
            }
        }
    }

就这么多，若是想在ie8下也用冒泡只绑一次，那就靠你本身了写代码了浏览器

【转载请注明出处】app