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>1</option>
        <option>2</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="123";
    }
      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>

 

posted @ 2017-01-16 15:22  heshan珊  Views(249)  Comments(0)  Edit  收藏  举报