哈哈哈，又来了，今天闲来无事，实验了下原生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值改变事件的更多相关文章

  1. 原生js监听input值发生变化

    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

  2. JS,JQ及时监听input值的变化,MUI的input搜索框里的清除按钮的点击监听事件

    JS: document.getElementById("input对象的ID").addEventListener('input',function(){ console.log ...

  3. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  4. onchange监听input值变化及input隐藏后change事件不触发的原因与解决方法(设置readonly后onchange不起作用的解决方案)

    转自:https://www.cnblogs.com/white0710/p/7338456.html 1. onchange事件监听input值变化的使用方法: <input id=" ...

  5. js监听输入框值的即时变化onpropertychange、oninput

    js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. // //   要达到的效果 ...

  6. 复选框 省市区 联动（监听input的change事件）

    需求:省市区三级包含复选框按钮以及文字描述.点击文字显示对应的下级地区,点击复选框选择对应的下级区域勾选. 分析:监听input的change事件当点击复选框省  选择对应的第一个市区,同时默认选中第 ...

  7. 原生Js监听普通dom尺寸变化

    原生Js监听普通dom尺寸变化 具体做法有以下几种: 初始化项目后,轮询,反复查看 dom 尺寸是否变化,这种一听就感觉不好,开销太大. 监听元素的滚动事件,在 目标 dom 里面包裹一个同等大小的 ...

  8. iOS：使用代理模式监听开关状态改变事件

    记一次解决跨控制器监听开关状态改变的尝试. 为了统一设置UITableViewCell里的内容,自定义了UITableViewCell类的一个基类,命名为SettingCell.SettingCell ...

  9. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

随机推荐

  1. Hadoop学习笔记（二）——zookeeper使用和分析

    分布式架构是中心化的设计.就是一个主控机连接多个处理节点,因此保证主控机高可用性十分关键.分布式锁是解决该问题的较好方案,多主控机抢一把锁.Zookeeper就是一套分布式锁管理系统,用于高可靠的维护 ...

  2. zendstudio的安装和破解

    参考博客地址:http://www.oxox.work/web/php-basic/zendstudio/ 注明:还未验证

  3. 安装Hadoop 1.1.2 （三 安装配置Hadoop）

    1 tar -zxvf hadoop-1.1.2.tar.gz 2 在hadoop/conf目录 (1) 编辑 hadoop-env.sh export JAVA_HOME=/usr/java/jdk ...

  4. OGEngine教程：字体工具使用

    1.打开 BitmapFont tool,在红框中输入你要显示的字. 2.写完后保存字体文件 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvT3Jhbmdl ...

  5. poj1845(二分快速求等比数列模M和)

    Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 17039   Accepted: 4280 Descripti ...

  6. 【BZOJ2806】[Ctsc2012]Cheat 广义后缀自动机+二分+单调队列优化DP

    [BZOJ2806][Ctsc2012]Cheat Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数接下来M行的01串,表示标准作文库接下来N行的 ...

  7. 关于Future

    1 为什么需要Callable和Future Runnable没有返回值,也不抛异常,这样主线程不能知道子线程的执行结果. 为了解决这个问题就有了Callable和Future.Callable提供的 ...

  8. leetcode第一刷_Best Time to Buy and Sell Stock II

    这道题尽管是上一道题的增强.可是反而简单了. 能够交易无数次,可是买卖必须成对的出现. 为了简单起见.我用abc三股股票来说明,且忽略掉相等的情况.三个数一共同拥有六种大小关系.注意他们之间的先后顺序 ...

  9. 拉普拉斯分布（Laplace distribution）

    拉普拉斯分布的定义与基本性质 其分布函数为 分布函数图 其概率密度函数为 密度函数图 拉普拉斯分布与正太分布的比较 从图中可以直观的发现拉普拉斯分布跟正太分布很相似,但是拉普拉斯分布比正太分布有尖的峰 ...

  10. vs+opencv

    vs + opencv 配置见网页 https://blog.csdn.net/qq_17550379/article/details/78201442 统一所有工程配置见下图: