change、keypress、input和propertychange

最新推荐文章于 2025-06-03 13:53:22 发布

原创最新推荐文章于 2025-06-03 13:53:22 发布 · 5.3k 阅读

5 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

26 篇文章

订阅专栏

jquery

12 篇文章

订阅专栏

本文介绍了在前端开发中几种常见的输入事件监听方式，包括 change、keypress 和 input 事件的区别及使用场景。通过实际代码示例展示了如何利用 jQuery 来绑定这些事件，以便开发者能够更好地理解和应用这些事件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    change:<input type="text" id="change"><br>
    keypress:<input type="text" id="keypress"><br>
    propertychange:<input type="text" id="propertychange"><br>
    input:<input type="text" id="input"><br>
  </body>
  <script type="text/javascript" src="jquery-3.0.0.min.js"></script>
  <script type="text/javascript">
    $(function(){
      /**
       * a、当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）
       * b、当前对象失去焦点(onblur)
       */
      $("#change").change(function(){
        console.log("change="+$(this).val());
      });

      /**
       * a、keypress/keydown/keyup监听键盘事件，鼠标复制黏贴操作无效
       */
      $("#keypress").keypress(function(){
        console.log("keypress="+$(this).val());
      });

      /**
       * a、input是标准的浏览器事件，一般应用于input元素，当input的value发生变化就会发生，无论是键盘输入还是鼠标黏贴的改变都能及时监听到变化
       * b、propertychange，只要当前对象属性发生改变。
       */
      $("#input").bind("input propertychange",function(){
        console.log("input="+$(this).val());
      });
    });
  </script>
</html>