原生js监听input值改变事件

Posted 为师灭了你

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生js监听input值改变事件相关的知识,希望对你有一定的参考价值。

哈哈哈,又来了,今天闲来无事,实验了下原生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下也用冒泡只绑一次,那就靠你自己了写代码了

【转载请注明出处】

以上是关于原生js监听input值改变事件的主要内容,如果未能解决你的问题,请参考以下文章

input值变化监听事件

onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法

当用js动态的改变一个输入框中的值后,并不能触发它的onchange事件why?

利用原生JS实时监听input框输入值

监听元素属性改变事件的方法

input输入框内容变化实时监听