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>
  • 相关阅读:
    OC文件操作、获取文件属性
    【解决方法】Unexpected namespace prefix “xmlns” found for tag Layout
    hdu5301(2015多校2)--Buildings(构造)
    java_GC
    iOS开发项目之四 [ 调整自定义tabbar的位置与加号按钮的位置]
    李洪强-C语言3-数组
    李洪强-C语言2-字符串
    李洪强-C语言1-指针
    【C语言】07-基本语句和运算
    【C语言】06-基本数据类型
  • 原文地址:https://www.cnblogs.com/heshan1992/p/6289783.html
Copyright © 2011-2022 走看看