javascript键盘事件
JavaScript教程第九章 事件驱动编程
{ alert("您好!"); }
hello_button.onclick = hello; //动态绑定
2021/4/15
中山大学计算机科学系
9
9.2.4 绑定多个事件处理函数
一、attachEvent( ) 方法
元素对象的 attachEvent( ) 方法：
object.attachEvent(event_name, function_handler)
onkeydown：键按下事件 onkeyup：键弹起事件 onkeypress：按键事件
事件顺序
当点击一次字符键时，依次触发 onkeydown、 onkeypress、onkeyup 事件。若按下不放，则持续触发 onkeydown 和 onkeypress 事件
当点击一次非字符键（如 Ctrl 键）时，依次触发 onkeydown、onkeyup 事件。若按下不放，则持续触发 onkeydown 事件
第九章 事件驱动编程
介绍 JavaScript 事件驱动编程的概念和技术， 以及常用事件的基本使用方法
基本概念 事件绑定 使用事件对象 处理鼠标事件 处理键盘事件 处理表单事件 处理编辑事件 处理异常
2021/4/15
中山大学计算机科学系
1
9.1 基本概念
一、事件 事件是指可以被浏览器识别的、发生在页面上的 用户动作或状态变化。其中：
2021/4/15
中山大学计算机科学系
22
9.5.2 识别键盘按键
在键盘事件处理函数中，使用 Event 对象的 keyCode 属性可以识别用户按下哪个键盘键，该属 性值等于用户按下的键盘键对应的 Unicode 键码值 例9.13 显示用户键入的字符
JavaScript中按键事件的e.keyCode e.which e.charCode
JavaScript中按键事件的e.keyCodee.whiche.charCode1、浏览器的按键事件浏览器有3种按键事件——keydown，keypress和keyup，分别对应onkeydown、onkeypress和onkeyup3个事件句柄。
一个典型的按键会产生所有这三种事件，依次是keydown-->keypress-->keyup。
[html]view plaincopyprint?1.<input type="text"id="text">2.<script>3.document.getElementById("text").onkeypress = function() {4.console.log("keypress");5.};6.document.getElementById("text").onkeyup = function() {7.console.log("keyup");8.};9.document.getElementById("text").onkeydown = function() {10.console.log("keydown");11.};12.</script>控制台输出：keydownkeypresskeyup2、浏览器的兼容性(1)FireFox、Opera、Chrome事件对应的函数有一个隐藏的变量e，表示发生事件。
e有一个属性e.which指示哪个键被按下，给出该键的索引值（按键码）。
静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。
eg：[html]view plaincopyprint?1.<input type="text"id="text">2.<script>3.document.getElementById("text").onkeypress = function(e) {4.alert("按键码: " + e.which + " 字符: " + String.fromCharCode(e.which));5.};6.</script>FireFox、Opera、Chrome中输入：a输出：按键码：97 字符：a(2)IEIE不需要e变量，window.event表示发生事件。
利用Javascript实现快捷键(Ctrl+Enter)触发事件_new
if(keys.ctrlKey && keys.keyCode == 13){ //判断一下是否同时按了CTRL键和ENTER键，13是什么？就是ENTER键啊，不知道？查查ASCII表
this.document.FORM.submit();} //如果判断的结果确实是两个键准确无误的按下了，那么就提交数据
·扫描功能已经在时刻准备着，就等候按键后执行所设定的函数了，那么我们该写函数了。这个函数里写什么？我们要写判断这次按键是不是我们要求的按键，是不是"CTRL+ENTER"？如果是那么就提交数据了，如果不是呢，放弃这次扫描，也就是说这次扫描被丢弃了。好了，函数的大体架构也有了，写代码吧：
function checkkey(keys) //上一段中介绍的event所携带的值传给了keys
原理：
通过Javascript脚本实现不间断扫描键盘按键，在某一时刻如果同时按下了"CTRL"键和"ENTER"键，那么立即触发提交表单的事件。即达到了通过组合快捷键提交们知道onkeydown事件实现的是每当键盘有按键动作的时候就触发一次该事件下所定义的函数。举个例子，我定义了<body onkeydown="test();">，那么只要在body区域内，我通过键盘按任何一个键，就会触发test()这个函数。我们知道了扫描方法，接下来要做的就是确定扫描区域了，我们仅仅扫描表单区域就可以了，这样在某种程度上能防止误操作造成数据错误提交。我来解释一下"扫描区域"这个名词，所谓扫描区域就是触发快捷键（函数）的有效区域，也就是说我在扫描区域以外按键，是不会执行我所设定的函数的（onkeydown事件下定义的函数），我将onkeydown这个事件放到那个标签内，那么标签所对应的网页区域就是有效扫描区域。好了，写代码了：<form ... onkeydown="checkkey(event)">。event干什么的？原来他是将这次按键的值传递给函数作判断用的。也就是说event里面承载着我们这次按键的数据。
JavaScript游戏开发知识点
JavaScript游戏开发知识点JavaScript是一种广泛应用于前端开发的脚本语言，它具有灵活性和易学性，使其成为开发游戏的理想选择。
本文将介绍JavaScript游戏开发中的一些重要知识点，帮助读者了解和掌握这门语言。
一、Canvas绘图Canvas是HTML5提供的一个2D绘图API，它可以通过JavaScript来动态地绘制图形、动画和游戏场景。
使用Canvas可以实现游戏中的图像渲染、碰撞检测以及动画效果等功能。
开发者可以使用Canvas提供的API来绘制直线、填充颜色、绘制图像等操作，从而创建出精美的游戏画面。
二、键盘事件处理开发游戏通常需要对用户输入做出响应，而键盘事件处理就是一种常见的方式。
通过JavaScript可以监听键盘事件，根据用户的按键操作来控制游戏角色的移动、攻击等行为。
常用的键盘事件包括keydown、keyup等，通过对这些事件进行监听和处理，可以实现与用户的互动。
三、碰撞检测在游戏开发中，碰撞检测是非常重要的一项技术。
通过JavaScript可以实现对游戏场景中各个元素之间的碰撞进行检测，从而触发相应的游戏逻辑。
常见的碰撞检测算法包括包围盒碰撞检测、像素级碰撞检测等，开发者可以根据具体情况选择合适的算法来应用在游戏中。
四、游戏动画在游戏中添加动画效果可以使游戏更加生动有趣。
通过JavaScript 可以实现游戏中的动画效果，比如角色的移动、攻击、死亡等动作。
可以使用requestAnimationFrame函数来制作流畅的动画效果，并通过计算帧率来控制动画的展示速度。
五、游戏音效游戏中的音效可以增加游戏的趣味性和真实感。
通过JavaScript可以实现音效的添加和控制，使游戏更加生动有趣。
可以使用HTML5的Audio对象来加载和播放游戏音效，同时可以通过JavaScript控制音效的播放和停止等操作。
六、游戏引擎游戏引擎是一种开发游戏的快速工具，可以提供常见的游戏开发功能和工具，简化开发流程。
js keyboardevent 例子
js keyboardevent 例子JS KeyboardEvent 是 JavaScript 中的一个事件对象，用于处理与键盘相关的事件。
它提供了许多属性和方法，以便我们可以获取和操作键盘事件的相关信息。
下面列举了10个关于JS KeyboardEvent 的例子，以帮助读者更好地理解和使用这个事件对象。
1. 获取键盘事件的键值```javascriptdocument.addEventListener('keydown', function(event) {console.log(event.key);});```这个例子展示了如何通过 KeyboardEvent 的 key 属性来获取键盘事件的键值。
当用户按下键盘上的任意键时，会在控制台输出对应的键值。
2. 判断是否按下了某个特定的键```javascriptdocument.addEventListener('keydown', function(event) {if (event.key === 'Enter') {console.log('Enter键被按下');}});```这个例子演示了如何使用 KeyboardEvent 的 key 属性来判断用户是否按下了 Enter 键。
当用户按下 Enter 键时，会在控制台输出相应的信息。
3. 获取键盘事件的修饰键状态```javascriptdocument.addEventListener('keydown', function(event) {console.log('Shift键是否按下：', event.shiftKey);console.log('Ctrl键是否按下：', event.ctrlKey);console.log('Alt键是否按下：', event.altKey);});```这个例子展示了如何使用 KeyboardEvent 的 shiftKey、ctrlKey 和 altKey 属性来获取键盘事件的修饰键状态。
js触发事件的方法
js触发事件的方法JavaScript中，触发事件的方法是非常重要的，它可以让我们在页面上动态响应用户的行为，从而提高我们页面的交互性和用户体验。
在本篇文章中，我们将深入探讨JS触发事件的方法。
一、addEventListener()方法addEventListener()方法是JS中使用最多的事件绑定方法之一，它能够捕获指定事件类型的所有事件，并将它们处理成指定的回调函数。
我们来看一下使用addEventListener()方法的语法：element.addEventListener(event, function, useCapture)参数说明：event：必须。
字符串，表示要接收的事件类型，比如click、mousedown等。
function：必须。
事件触发时执行的回调函数。
useCapture：可选。
Boolean类型，表示是否使用事件捕获模式。
默认情况下为false，即使用事件冒泡模式。
二、onclick()方法onclick()方法是一种特殊的事件触发方法，它只能用于鼠标单击事件。
当鼠标单击元素时，onclick()方法会触发指定的回调函数。
我们来看一下onclick()方法的语法：element.onclick = function;参数说明：function：必须。
事件触发时执行的回调函数。
三、dispatchEvent()方法dispatchEvent()方法是JS中另一种触发事件的方法，它可以模拟任何类型的事件，如鼠标事件、键盘事件等等。
使用dispatchEvent()方法时需要先创建一个Event对象，然后通过dispatchEvent()方法触发该对象。
我们来看一下dispatchEvent()方法的语法：element.dispatchEvent(event)参数说明：event：必须。
Event对象，表示要触发的事件类型。
四、fireEvent()方法在IE浏览器中，我们可以使用fireEvent()方法来触发事件。
JS——各种事件
JS——各种事件⿏标事件⿏标事件指与⿏标相关的事件（滚轮），继承了MouseEvent接⼝。
问：⿏标事件有哪些？click , dblclick , mousedown , mouseup ,mousemove , mouseenter ， mouseover , mouseout , mouseleave , contextmenu( 按下右键)， wheel（滑轮滚动）【后⾯这两个也是，别忘记】mouseenter事件只触发⼀次，在⽗节点内部进⼊⼦节点，不会触发mouseenter事件，但是会触发mouseover事件。
mouseout事件和mouseleave事件，都是⿏标离开⼀个节点时触发。
两者的区别是，在⽗元素内部离开⼀个⼦元素时，mouseleave事件不会触发，⽽mouseout事件会触发。
（mouseover与mouseout这两个O字母开头的事件会受到⿏标在⼦⽗亲之间变化的影响）MouseEvent实例属性有哪些？MouseEvent接⼝继承了Event接⼝，所以拥有Event的所有属性和⽅法。
它还有⾃⼰的属性和⽅法。
screenX （屏幕）， screenY ， clientX（程序窗⼝），offsetX(返回⿏标位置与⽬标节点左侧的padding边缘的⽔平距离（单位像素）) , offsetY, clientY ，pageX,pageY(属性返回与⽂档上侧边缘的距离（单位像素）。
它们的返回值都包括⽂档不可见的部分。
这两个属性都是只读。
) ctrlKey （是否按下了ctrl键，返回布尔）， shiftKey ， altKey ， button（左键的值为0，中间1，右键2）举个例⼦：实例⽅法：getModifierState:⽅法返回⼀个布尔值，表⽰有没有按下特定的功能键。
它的参数是⼀个表⽰的字符串wheel事件：WheelEvent 接⼝继承了 MouseEvent 实例，代表⿏标滚轮事件的实例对象。
jquery键盘事件keypress（）keydown（）keyup（）用法总结
jquery键盘事件keypress（）keydown（）keyup（）⽤法总结事件的定义完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当按钮被按下时，发⽣ keydown 事件。
keydown() ⽅法触发 keydown 事件，或规定当发⽣ keydown 事件时运⾏的函数。
当按钮被松开时，发⽣ keyup 事件。
它发⽣在当前获得焦点的元素上。
keyup() ⽅法触发 keyup 事件，或规定当发⽣ keyup 事件时运⾏的函数。
keypress 事件与 keydown 事件类似。
当按钮被按下时，会发⽣该事件。
它发⽣在当前获得焦点的元素上。
不过，与 keydown 事件不同，每插⼊⼀个字符，就会发⽣ keypress 事件。
keypress() ⽅法触发 keypress 事件，或规定当发⽣ keypress 事件时运⾏的函数。
使⽤情况：（which事件）$("input").keydown(function(event){$("div").html("Key: " + event.which);});which 属性指⽰按了哪个键或按钮。
（event.keyCode和event.charCode进⾏了标准化。
）1.理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的2.在input元素上绑定keydown事件时获取的内容都是之前输⼊的，当前输⼊的获取不到3.keydown()事件触发在⽂字还没有敲进⽂本框，这时如果在kevdown事件中输⼊⽂本框中的⽂本，得到的是触发键盘事件前的⽂本4.keyup()事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的⽂本5.keypress()捕获浏览器键盘输⼊的时候6.keypress事件与keydown和keyup的主要区别（所以使⽤组合键时需要使⽤keydown事件兼容）只能捕获单个字符，不能捕获组合键⽆法响应系统功能键（如delete，backspace）不区分⼩键盘和主键盘的数字字符7.KeyPress主要⽤来接收字母、数字等ANSI字符8.KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键，如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等在使⽤键盘的时候通常会⽤到 Ctrl+shift+alt 类似的组合键功能，通过 keyup 事件能够处理(说明⼀下这⾥不⽤keydown事件：因为在判定keydown 的时候，ctrl、shift、和Alt属于⼀直按下状态然后再加另外⼀个键是不能准确捕获组合键，所以使⽤keydown 是不能准确判断的，要通过keyup事件来判定)以上就是本次介绍的关于jquery 键盘事件函数的全部知识点内容，更多内容可以到相关栏⽬查找。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
主要分四个部分第一部分：浏览器的按键事件第二部分：兼容浏览器第三部分：代码实现和优化第四部分：总结第一部分：浏览器的按键事件用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。
一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。
在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。
这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。
[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中是通用的。
第二部分：兼容浏览器凡是涉及浏览器的js，就都要考虑浏览器兼容的问题。
目前常用的浏览器主要有基于IE和基于Mozilla两大类。
Maxthon是基于IE内核的，而FireFox和Opera是基于Mozilla内核的。
2.1 事件的初始化首先需要了解的是如何初始化该事件，基本语句如下：function keyDown(){}document.onkeydown = keyDown;当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫KeyDown()函数。
2.2 FireFox和Opera的实现方法FireFox和Opera等程序实现要比IE麻烦，所以这里先描述一下。
keyDown()函数有一个隐藏的变量--一般的，我们使用字母“e”来表示这个变量。
function keyDown(e)变量e表示发生击键事件，寻找是哪个键被按下，要使用which这个属性：e.whiche.which将给出该键的索引值，把索引值转化成该键的字母或数字值的方法需要用到静态函数String.fromCharCode()，如下：String.fromCharCode(e.which)把上面的语句放在一起，我们可以在FireFox中得到被按下的是哪一个键：function keyDown(e) {var keycode = e.which;var realkey = String.fromCharCode(e.which);alert("按键码: " + keycode + " 字符: " + realkey);}document.onkeydown = keyDown;2.3 IE的实现方法IE的程序不需要e变量，用window.event.keyCode来代替e.which，把键的索引值转化为真实键值方法类似：String.fromCharCode(event.keyCode)，程序如下：function keyDown() {var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode);alert("按键码: " + keycode + " 字符: " + realkey);}document.onkeydown = keyDown;2.4 判断浏览器类型上面了解了在各种浏览器里是如何实现获取按键事件对象的方法，那么下面需要判断浏览器类型，这个方法很多，有比较方便理解的，也有很巧妙的办法，先说一般的方法：就是利用navigator对象的appName属性，当然也可以用userAgent属性，这里用appName来实现判断浏览器类型，IE和Maxthon的appName是“Microsoft Internet Explorer” ,而FireFox 和Opera的appName是“Netscape”，所以一个功能比较简单的代码如下： function keyUp(e) {if(navigator.appName == "Microsoft Internet Explorer"){var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode);}else{var keycode = e.which;var realkey = String.fromCharCode(e.which);}alert("按键码: " + keycode + " 字符: " + realkey);}document.onkeyup = keyUp;比较简洁的方法是[2]：function keyUp(e) {var currKey=0,e=e||event;currKey=e.keyCode||e.which||e.charCode;var keyName = String.fromCharCode(currKey);alert("按键码: " + currKey + " 字符: " + keyName);}document.onkeyup = keyUp;上面这种方法比较巧妙，简单地解释一下：首先，e=e||event;这句代码是为了进行浏览器事件对象获取的兼容。
js中这句代码的意思是，如果在FireFox或Opera中，隐藏的变量e是存在的，那么e||event返回e，如果在IE中，隐藏变量e是不存在，则返回event。
其次，currKey=e.keyCode||e.which||e.charCode;这句是为了兼容浏览器按键事件对象的按键码属性（详见第三部分），如IE中，只有keyCode属性，而FireFox中有which和charCode 属性，Opera中有keyCode和which属性等。
上述代码只是兼容了浏览器，获取了keyup事件对象，简单的弹出了按键码和按键的字符，但是问题出现了，当你按键时，字符键都是大写的，而按shift键时，显示的字符很奇怪，所以就需要优化一下代码了。
第三部分：代码实现和优化3.1 按键事件的按键码和字符码按键事件的按键码和字符码缺乏浏览器间的可移植性，对于不同的浏览器和不同的案件事件，按键码和字符码的存储方式都是不同的，按键事件，浏览器和按键事件对象属性关系如下表：如表所示：在IE中，只有一个keyCode属性，并且它的解释取决于事件类型。
对于keydown来说，keyCode 存储的是按键码，对于keypress事件来说，keyCode存储的是一个字符码。
而IE中没有which 和charCode属性，所以which和charCode属性始终为undefined。
FireFox中keyCode始终为0，时间keydown/keyup时，charCode=0，which为按键码。
事件keypress时，which和charCode二者的值相同，存储了字符码。
在Opera中，keyCode和which二者的值始终相同，在keydown/keyup事件中，它们存储按键码，在keypress时间中，它们存储字符码，而charCode没有定义，始终是undefined。
3.2 用keydown/keyup还是keypress第一部分已经介绍了keydown/keyup和keypress的区别，有一条比较通用的规则，keydown 事件对于功能按键来说是最有用的，而keypress事件对于可打印按键来说是最有用的[3]。
键盘记录主要是针对于可打印字符和部分功能按键，所以keypress是首选，然而正如第一部分提到的，IE中keypress不支持功能按键，所以应该用keydown/keyup事件来进行补充。
3.3 代码的实现总体思路，用keypress事件对象获取按键字符，用keydown事件获取功能字符，如Enter，Backspace等。
代码实现如下所示!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>js 按键记录</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT="羽殇仁"><META NAME="Keywords" CONTENT="js 按键记录"><META NAME="Description" CONTENT="js 按键记录"></HEAD><BODY><script type="text/javascript">var keystring = "";//记录按键的字符串function $(s){return document.getElementById(s)?document.getElementById(s):s;} function keypress(e){var currKey=0,CapsLock=0,e=e||event;currKey=e.keyCode||e.which||e.charCode;CapsLock=currKey>=65&&currKey<=90;switch(currKey){//屏蔽了退格、制表、回车、空格、方向键、删除键case 8: case 9:case 13:case 32:case 37:case 38:case 39:case 40:case 46:keyName = "";break;default:keyName = String.fromCharCode(currKey); break;}keystring += keyName;}function keydown(e){var e=e||event;var currKey=e.keyCode||e.which||e.charCode;if((currKey>7&&currKey<14)||(currKey>31&&currKey<47)){switch(currKey){case 8: keyName = "[退格]"; break;case 9: keyName = "[制表]"; break;case 13:keyName = "[回车]"; break;case 32:keyName = "[空格]"; break;case 33:keyName = "[PageUp]"; break;case 34:keyName = "[PageDown]"; break;case 35:keyName = "[End]"; break;case 36:keyName = "[Home]"; break;case 37:keyName = "[方向键左]"; break;case 38:keyName = "[方向键上]"; break;case 39:keyName = "[方向键右]"; break;case 40:keyName = "[方向键下]"; break;case 46:keyName = "[删除]"; break;default:keyName = ""; break;}keystring += keyName;}$("content").innerHTML=keystring;}function keyup(e){$("content").innerHTML=keystring;}document.onkeypress=keypress;document.onkeydown =keydown;document.onkeyup =keyup;</script><input type="text" /><input type="button" value="清空记录" onclick="$('content').innerHTML ='';keystring = '';"/><br/>请按下任意键查看键盘响应键值：<span id="content"></span></BODY></HTML>代码分析：$()：根据ID获取domkeypress(e)：实现对字符码的截获，由于功能按键要用keydown获取，所以在keypress 中屏蔽了这些功能按键。