JavaScript 中 onKeyUp 和 onKeyDown 以及 onKeyPress 使用和区别

发布于 2019-06-30 19:53:04 字数 2259 浏览 2211 评论 0

JavaScript 对于键盘的输入,有多个处理事件,看似功能都差不多是不是多余的,其实不然 JavaScript 的每个事件都是经过万千开发实践总结的,有这个事件必有其存在的意义,这篇文章将为您介绍 JavaScript 中 onKeyUp 和 onKeyDown 以及 onKeyPress 使用和区别。

事件介绍

我们先来看看 JavaScript 中 onKeyUp 和 onKeyDown 以及 onKeyPress 介绍,了解他们到底有何用途。

onKeyPress

这个事件在用户按下并放开任何字母数字键时发生,并不是每个按键都会触发这个事件。系统按钮(例如:箭头键和功能键)无法得到识别。

onKeyUp

这个事件在用户放开任何先前按下的键盘键时发生。

onKeyDown

这个事件在用户按下任何键盘键(包括系统按钮,如箭头键和功能键)时发生。

最难理解的是 onKeyUp 和 onKeyPress 事件,onKeyPress 按下并放开,onKeyUp 按下并放开所有键,其中略有不同,对于输入快的人,按键都是连续的,所以 onKeyPress 每个按键都会调用,可理解为正在输入的状态中调用,但是 onKeyUp 是所有按键都弹起时被调用,调用的次数是按键的个数。

简单的例子

我们编写一个文本框,然后给他绑定JavaScript中onKeyUp和onKeyDown以及onKeyPress事件

<input type="text"
onkeydown = "console.log('onkeydown')"
onkeyup="console.log('onkeyup')"
onkeypress="console.log('onkeypress')">

运行结果在控制台输出,我们来测试一下,你可以点击这里查看示例页面

1、当只输入一个字符的时候

2、多个字符同时输入,也就是中间没有停顿,上一个字符还未弹起时输入下一个字符。

总结

通过上面的测试,我们发现发现 onKeyDown 事件最先执行,其次是 onKeyPress,最后是才是 onKeyUp,onKeyDown 和onKeyPress 会影响 onKeyUp 的执行。三个事件同事在的话,onKeyUp 不会在中途执行,也就是要等所有按键都弹起以后才会执行。

三者在事件的响应上还有一点不同,就是 onKeyDown、onKeyPress 事件响应的时候输入的字符并没有被系统接受,而响应 onKeyUp 的时候,输入流已经被系统接受。

由于 onKeyDown 比 onKeyPress 先执行,再根据上面的例子可以知道,onKeyDown 触发的时候输入流正要进入系统,也就是说 onKeyDown 事件一完,输入流就进入了系统无法改变。

所以通过 onKeyDown 事件可以改变用户是按了哪个键,而 onKeyPress 事件则是在输入流进入系统后触发的,但输入流暂未被系统处理,此时已经不能改变输入流 了,onKeyUp 则是输入流被系统处理后发生的。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

淹不死的鱼

文章 0 评论 0

zhangMack

文章 0 评论 0

爱的故事

文章 0 评论 0

linces

文章 0 评论 0

早乙女

文章 0 评论 0

鸵鸟症

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。