onchange、oninput、onpropertyChange事件的异同

onchange事件适用于input\textarea\select元素上，支持各大浏览器，该事件只有在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效；

oninput事件适用于input\textarea\select元素，支持出IE外各大浏览器，该事件只有在键盘或者鼠标操作改变对象属性，只要属性发生变化就会触发事件，无需失去焦点。脚本触发无效；

onpropertychange属性可在某些情况下解决上面存在的问题，不用考虑是否失去焦点，不管js操作还是键盘鼠标手动操作，只要HTML元素属性发生改变即可立即捕获到。遗憾的是，onpropertychange为IE专属的。

可通过下面的方法进行测试，看效果：

<!DOCTYPE html>

<html>

<head>

<!-- redirect to the root krpano.html to avoid local browser restrictions -->

<meta  charset="utf-8"/>

<title>input</title>

</head>

<body>

    <input type="text" id="text" onchange="textChange()" onpropertychange="aa()">

    <input type="date" id="date">

    <input type="color" id="color" oninput="conColor()">

    <input type="search">

    <select id="select" oninput="selectChange()">

        <option></option>

        <option></option>

    </select>

    <textarea onchange="textareaChange()">wmen fjowgjksdjgsjlh;ruyssmngjshtuskgnvisysanhdi dhiynsgid是央视非得让公司和覅三个我们一起；AOI</textarea>

    <script type="text/javascript">

    window.onload=function(){

        var text=document.getElementById("text");

        text.value="";

    }

      function aa(){

          var text=document.getElementById("text");

         console.log(text.value);

      }

      function conColor(){

                 var color=document.getElementById("color");

                 console.log(color.value);

             }

      function textChange(){

         var text=document.getElementById("text");

         console.log(text.value);

     }

     function selectChange(){

         var select=document.getElementById("select");

         console.log(select.value);

     }

      function textareaChange(){

         var textarea=document.getElementById("textarea");

         console.log(textarea.text);

     }

    </script>

</body>

</html>

秒客网

onchange、oninput、onpropertyChange事件的异同

相关文章