原生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值改变事件的主要内容，如果未能解决你的问题，请参考以下文章
onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法