今天来学习下js的键盘事件

cp3_forever
669 阅读2分钟

这是我参与8月更文挑战的第27天，活动详情查看：8月更文挑战

介绍

js的键盘事件有3种，它们是keydown事件,keypress事件,keyup事件。今天来学习下它们，看看它们之间有何区别。

键盘事件

  • keydown事件是按键按下去时候会触发

  • keypress事件是按键按压的时候触发，一般是紧跟着keydown之后

  • keyup事件是按键按下去后，然后松开的时候触发

我们来验证下它们的执行顺序：

  <div>
    <input>
  </div>
  <script>
    const input = document.querySelector('input')
    
    input.addEventListener('keydown', function (e) {
      console.log('我是keydown事件')
    })
    input.addEventListener('keypress', function (e) {
      console.log('我是keypress事件')
    })
    input.addEventListener('keyup', function (e) {
      console.log('我是keyup事件')
    })
  </script>

image.png

由打印的顺序得知，三者的触发顺序是

keydown =》 keypress =》 keyup

区别

通过上面，我们了解到它们事件的先后执行顺序，那除了这个，它们还有别的区别吗？

有的。

  1. 如果我们想阻止键盘的默认输入行为，一定要在keydown事件或者keypress事件阻止，不能在keyup里面阻止。

    因为keyup是键盘抬起的时候，这时浏览器已经收到了键盘输入的信息了，这时候就无法阻止了。

      <div>
    <input>
  </div>
  <script>
    const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      e.preventDefault()
      console.log('我是keyup事件')
    })
  </script>

    image.png

    可以看到输入框是有值的，是无法阻止输入的。

    我们把事件换成keypress

      <div>
    <input>
  </div>
  <script>
    const input = document.querySelector('input')
    input.addEventListener('keypress', function (e) {
      e.preventDefault()
      console.log('我是keypress事件')
    })
  </script>

    image.png

    可以看到输入框是空白的，浏览器阻止了我的输入。

  2. keypress无法在中文输入法下触发，也无法在系统功能键下触发，比如说ctrl键,shift键,alt键，delete键等等。

    image.png

    可以看到只是触发了keydown事件和keyup事件。

    你也可以试试系统功能键，结果是一样的。

  3. 如果一直按着键盘，window下keydown和keypress会交替重复执行，mac下keydown和keypress会先触发一次，然后一直触发keydown事件，keyup事件直到松开键盘后才会触发。

    mac上打印的结果：

    image.png

    可以看到keydown和keypress会先触发一次，然后一直触发keydown事件，直至松开。

  4. 针对大小写字母，keypress事件的keyCode（键码，等同于ASCII码）可以区分，keydown和keyup事件的keyCode则都认为是大写字母。

      <div>
    <input>
  </div>
  <script>
    const input = document.querySelector('input')

    input.addEventListener('keydown', function (e) {
      console.log('我是keydown事件', e.keyCode)
    })
    input.addEventListener('keypress', function (e) {
      console.log('我是keypress事件', e.keyCode)
    })
    input.addEventListener('keyup', function (e) {
      console.log('我是keyup事件', e.keyCode)
    })
  </script>

    image.png

    image.png

    a的ASCII码是97, A的ASCII码是65。

    可以看到，keypress事件是可以正确区分大小写字母，keydown和keyup事件则都当作是大写字母。

总结

以上就是我总结的js的键盘事件，大家可以学习下，后续需要用的时候，就可以派上用场了。

它们的执行顺序是keydown =》 keypress =》 keyup。

感谢你们的阅读。

avatar
文章
阅读
粉丝