javascript中有什么常用的事件(详细说说JavaScript键盘事件keydown)

浏览器的按键事件

我们先从浏览器按键时间说起,

用JavaScript实现键盘记录,要关注浏览器的三种按键事件类型,

  • keydown
  • keypress
  • keyup

它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup。

KeyDown:在控件有焦点的情况下按下键时发生。

KeyPress:在控件有焦点的情况下按下键时发生。

KeyUp:在控件有焦点的情况下释放键时发生。

javascript中有什么常用的事件(详细说说JavaScript键盘事件keydown)(1)

在这3种事件类型中,keydown和keyup比较底层,而keypress比较高级。这里所谓的高级是指,当用户按下shift 1时,keypress是对这个按键事件进行解析后返回一个可打印的“!”字符,而keydown和keyup只是记录了shift 1这个事件。

但是keypress只能针对一些可以打印出来的字符有效,而对于功能按键,如F1-F12、Backspace、Enter、Escape、 PageUP、PageDown和箭头方向等,就不会产生keypress事件,但是可以产生keydown和keyup事件。然而在FireFox中,功能按键是可以产生keypress事件的。

传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl或Shift和一个按键一起按下,这通过事件的altKey、ctrlKey和shiftKey属性表示,这些属性在FireFox和IE中是通用的。

javascript中有什么常用的事件(详细说说JavaScript键盘事件keydown)(2)

注意:

KeyDown触发后,不一定触发KeyUp,当KeyDown 按下后,拖动鼠标,那么将不会触发KeyUp事件。

KeyPress主要用来捕获数字(注意:包括Shift 数字的符号)、字母(注意:包括大小写)、小键盘等 除了 F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜单键}、{开始键}和方向键 外的ANSI字符

KeyPress 只能捕获单个字符,可以捕获单个字符的大小写,不区分小键盘和主键盘的数字字符。

KeyDown 和KeyUp 通常可以捕获键盘除了PrScrn(截屏)所有按键

KeyDown 和KeyUp 可以捕获组合键,对于单个字符捕获的KeyValue 都是一个值,也就是不能判断单个字符的大小写,区分小键盘和主键盘的数字字符。

其中PrScrn 按键KeyPress、KeyDown和KeyUp 都不能捕获。

keydown、keypress 按着不动会持续执行事件,keyup执行一次

在使用键盘的时候,通常会使用到CTRL SHIFT ALT 类似的组合键功能,通过KeyUp 事件能够来处理(这里说明一下为什么不用KeyDown,因为在判定KeyDown的时候,CTRL、SHIFT和ALT 属于一直按下状态,然后再加另外一个键是不能准确捕获组合键,所以使用KeyDown 是不能准确判断出的,要通过KeyUp 事件来判定 )

javascript中有什么常用的事件(详细说说JavaScript键盘事件keydown)(3)

前端架构暴力拆解,源码解析,多年经验分享,请持续关注!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页