js监听文本框值变化事件，就oninput & onpropertychange & onkeyup & onchange的区别

在Web前端项目中实时监听文本框的值变化是非常常见的功能，通常最简单最容易想到的是onkeyup和onchange事件，但是在使用onkeyup来监听键盘事件的时候，监听不到鼠标右键的粘贴、复制的操作，在处理组合键的时候也比较麻烦，所以这篇文章简单介绍一下HTML5中的 oninput 和IE专属事件 onpropertychang 来解决监听文本框值变化。

　　这几个事件的说明和区别：

1、onkeyup：在键盘上某个按键按下后再松开时会触发。

2、onchange：此事件触发的条件有两个

　　1）、当前文本框属性变化，并且是通过键盘或者鼠标来触发的。（脚本触发的无效）

　　2）、当前文本框失去焦点（onblur）

3、onpropertychange：顾名思义，就是property(属性)change(改变)的时候，触发事件（对象改变任何属性的时候都会触发）。但是这个事件是IE专有的！，onpropertychange 会在设置了disable=true的时候失效，

4、oninput：该事件是处IE以外的大多数浏览器都支持的事件，只对该对象的value值改变的时候触发，是实时的。但是通过js改变的value 不会触发该事件。

在阻止冒泡事件时

e.stopPropagation() //用于firefox和chrome等其他浏览器。

e.cancelBubble = true //用于IE中阻止冒泡事件

你会发现，在你单击输入框的时候会触发onpropertychange，在你输入一个值的时候也会触发该事件，因此说明了在监听onpropertychange时 只要有属性发生变化就会触发该事件。

既然知道了这一点，我们会发现，当我们有的时候在文本框的值变化的时候我们希望改变一个自定义的属性值，这样地话onpropertychange就会触发两次，这个使我们不希望发生的。

那我们怎样才能知道我们改变的是哪个属性呢？不防我们试着获取一下onpropertychange的参数内容

代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <input type="text" id="propertychang" value="文本" onclick="this.isprop = 'prop'"/>

        <script>
            document.getElementById("propertychang").attachEvent("onpropertychange",function(){
                console.log(arguments.length);
                for(var i = 0; i < arguments.length; i++){
                    console.log(arguments[i]);
                }
            });
        </script>
    </body>
</html>

运行上边代码我们会发现输出了1和[object]如图：说明该事件有一个参数而且是object类型，那么我们遍历一下这个object看看

代码：

<input type="text" id="propertychang" value="文本" onclick="this.isprop = 'prop'"/>

        <script>
            document.getElementById("propertychang").attachEvent("onpropertychange",function(obj){
                for(var key in obj){
                    console.log(key + ":" + obj[key]);
                }
            });
        </script>

输出如下：

我们发现会有好多属性，但是我们仔细查看会找到一个propertyName的属性，因此我们可以用此属性获取那个属性改变了所以我们可以这样写：

<input type="text" id="propertychang" value="文本" onfocus="this.isprop = 'prop'"/>

        <script>
            document.getElementById("propertychang").attachEvent("onpropertychange",function(obj){
                if(obj.propertyName === "value"){
                    //自己的函数处理
                }
            });

        </script>

写到这里这篇文章也就结束了，感谢大家的阅读。