zoukankan      html  css  js  c++  java
  • onchange、oninput、onpropertyChange事件的异同

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

    oninput事件适用于input extareaselect元素,支持出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>
  • 相关阅读:
    DevComponents DotNetBar 中Ribbon汉化
    类型Universe无法解析程序 集:System.Design,Version=2.0.0.0
    MapXtreme使用编辑工具
    html中汉字乱码
    c#皮肤使用
    c# 中的internal使用
    DonNetBar汉化
    外汇期货学习专帖(转)
    苦难属于悲情的人
    IT规划宜分步走 忌盲目好大喜功(载)
  • 原文地址:https://www.cnblogs.com/heshan1992/p/6289783.html
Copyright © 2011-2022 走看看