为什么 keypress 事件被弃用引发的思考, 我们用鼠标和键盘是怎么和 PC 交互的

1,016 阅读2分钟

在 MDN keypress_event 文档中可以看到 keypress 事件被弃用了, 为什么?

思考一下我们和 PC 的交互, 主要是 鼠标(mouse) 和 键盘(keyboard).

鼠标是一种指针外设, 在我们用鼠标和 PC 交互的时候, 正常下每一次的操作需要两个行为, 按下鼠标键, 松开鼠标键, 这被称为 click, 中文叫 点击. 在我们按下鼠标键, 但是没有松开鼠标键的时候, 事件不会触发, 拿一个按钮为例, 没有松开鼠标键的时候按钮不会被触发, 甚至于如果你在按下鼠标键的时候把鼠标指针移除按钮区域, 会发现按钮也不会被触发, 我称这个为悬而未决. 所以按钮事件的触发需要完整的完成 mousedown, mouseup 两个行为. 这也就是我为什么没有采用 stackoverflow.com/questions/3… 回答中被采用答案:

image.png

而是采用了这个方案, 如作者所言, 这不会破坏 click 的语义:

image.png

键盘是一种输入外设, 键盘的输入事件的触发没有一种悬而未决的状态, 我按下了一个键意味着我就是要输入这个字符, 这就是 keydown 事件. 甚至于我长时间按着这个键我不松开, 就是我要重复的触发这个输入事件, 这就是 KeyboardEvent.repeat. 然后我松开的时候触发了 keyup 事件, 但是这个事件大部分时候没什么用处, 我松开键盘按键是说明我输入结束了, 而不是我要输入确定. 但是 鼠标 的松开就是输入确定. keypress 被弃用的原因是使用场景可以被 keydown 所覆盖, keydown 事件的 code 说明了按键所处的位置, key 说明了产生的 char.

鼠标的键程很短, 很容易触发, 这是为了易用. 而且相信你在浏览网页的时候, 在漫无目的的滑动页面大部分都是在用鼠标, 这决定了鼠标是一个可能被误按下的情况. 另一个是 鼠标 给了你反悔的机会, 因为鼠标是做决定的, 不知道你有没有这种场景

  1. 消息框内 用键盘 输入了很多

  2. 将鼠标滑到了 发送 按钮, 按下了 鼠标左键, 但是 没有松开

  3. 叹了一口气, 将 鼠标 移开了发送按钮

  4. 松开了鼠标

  5. Ctrl + a

  6. del or backspace