详细说说JavaScript 键盘事件keydown、keypress、keyup

览器的按键事件

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

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

keydown
keypress
keyup

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

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

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

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

在这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中是通用的。

注意:

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 事件来判定）

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

:键盘事件:

keydown 事件会在按键在元素上按下时触发

keyup 事件会在按键在元素上松开时触发

键盘事件只能绑定给可以获取焦点的元素

事件对象中key属性，表示当前所按的按键

keyCode返回的是按键的编号（不区分大小写和换挡）

类似于ctrl alt shift这种功能按键，在事件对象中都有专门判断属性

ctrlKey 用来判断ctrl是否被按下，按下返回true，否则返回false

altKey 用来判断alt是否按下

shiftKey 用来判断shift是否按下

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 200px;

height: 200px;

background-color: #ff0;

}

</style>

<script>

window.onload = function () {

var inp = document.querySelector('[type=text]');

/*

keydown 事件 会在按键在元素上按下时触发

*/

// inp.addEventListener('keydown',function () {

// console.log('按键按下了~~');

// });

/*

keyup 事件 会在按键在元素上松开时触发

*/

// inp.addEventListener('keyup',function () {

// console.log('按键松开了~~');

// });

/*

键盘事件只能绑定给可以获取焦点的元素

*/

// document.getElementById('box1').addEventListener('keydown',function () {

// console.log('哈哈哈~~~');

// });

// document.querySelector('a').addEventListener('keydown',function () {

// console.log('按键按下了~~');

// });

document.addEventListener('keydown',function (ev) {

/*

事件对象中key属性，表示当前所按的按键

keyCode返回的是按键的编号（不区分大小写和换挡）

*/

// if(ev.key.toLowerCase() === 'k'){

// alert('你按了k了！');

// }

/*

判断用户的ctrl和k是否同时被按下

*/

// if(ev.key === 'Control' && ev.key.toLowerCase() === 'k') {

// alert('你的ctrl和k被同时按下了~~~');

// }

/*

类似于ctrl alt shift这种功能按键，在事件对象中都有专门判断属性

ctrlKey 用来判断ctrl是否被按下，按下返回true，否则返回false

altKey 用来判断alt是否按下

shiftKey 用来判断shift是否按下

*/

// if(ev.ctrlKey && ev.key.toLowerCase() === 'k') {

// alert('你的ctrl和k被同时按下了~~~');

// }

alert(ev.key);

});

};

</script>

</head>

<body>

<input type="text">

<a href="javascript：;">超链接</a>

<!--<div id="box1"></div>-->

</body>

</html>

2键盘控制div移动练习:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#box1{

width: 100px;

height: 100px;

background-color: #f00;

position: absolute;

}

</style>

<script>

/*

通过键盘来控制div的移动

*/

window.onload = function () {

// 获取box1

var box1 = document.getElementById('box1');

// 为document绑定一个keydown事件

document.addEventListener('keydown',function (ev) {

// 判断按键的方向

dir = ev.key;

});

document.addEventListener('keyup',function (ev) {

// 判断按下的键和松开的键是不是同一个

if(dir === ev.key){

// 按键松开，重置dir

dir = '';

}

});

// 创建一个变量，用来记录运动的方向

var dir = '';

// 创建一个定时器，来控制元素的移动

setInterval(function () {

switch (dir) {

case 'ArrowUp':

case 'Up':

//向上移动

box1.style.top = box1.offsetTop - 10 + 'px';

break;

case 'ArrowDown':

case 'Down':

// 向下移动

box1.style.top = box1.offsetTop + 10 + 'px';

break;

case 'ArrowLeft':

case 'Left':

// 向左移动

box1.style.left = box1.offsetLeft - 10 + 'px'

break;

case 'ArrowRight':

case 'Right':

// 向右移动

box1.style.left = box1.offsetLeft + 10 + 'px'

break;

}

},30)

};

/* input.addEventListener('keydown', function (ev) {

// 限制在input中只能输出数字

// console.log(typeof ev.key);

// ev.key 是数字就让你输入，如果不是就禁止输入

// 取消keydown的默认行为

if(/\D/.test(ev.key)){ //用正则限制

ev.preventDefault();

}

});*/

</script>

</head>

<body>

<div id="box1"></div>

</body>

</html>

3定时器:

setTimeout() 用来设置函数在一定时间后执行

参数：

第一个要执行的函数

第二个间隔的时间（毫秒）

setTimeout(test, 3000);

clearTimeout() 用来关闭setTimeout()所设置的定时器

setInterval()

- 可以用来设置让一个函数反复的执行

- 参数：

1.要执行的函数

2.每次执行的间隔时间

- setInterval() 调用时，它会返回一个唯一的id作为参数，

这个id是定时器的唯一标识，可以通过标识来关闭定时器

clearInterval() 用来关闭定时器

clearInterval(timer);

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

function test() {

console.log('hello');

}

// test();

// 通过定时器可以设置函数在一定时候才执行

// setTimeout() 用来设置函数在一定时间后执行

// 参数：

// 第一个 要执行的函数

// 第二个 间隔的时间（毫秒）

// setTimeout(test, 3000);

//clearTimeout() 用来关闭setTimeout()所设置的定时器

/*

setInterval()

- 可以用来设置让一个函数反复的执行

- 参数：

1.要执行的函数

2.每次执行的间隔时间

- setInterval() 调用时，它会返回一个唯一的id作为参数，

这个id是定时器的唯一标识，可以通过标识来关闭定时器

*/

var timer = setInterval(test, 3000);

setTimeout(function () {

clearInterval(timer);

},10000)

// clearInterval() 用来关闭定时器

// clearInterval(timer);

</script>

</head>

<body>

</body>

</html>

4.定时器的setTimeout()做循环使用:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<script>

// window.addEventListener('keydown',function () {

// alert(123);

// });

window.onload = function () {

var head = document.getElementById('head');

var num = 0;

// 创建一个定时器，来定时修改h1中的文字

setTimeout(function fn() {

num++;

head.innerHTML = num;

setTimeout(fn, 10*num);

},10);

};

</script>

</head>

<body>

<h1 id="head">0</h1>

</body>

</html>

对比requestAnimationFrame和setInterval :

requestAnimationFrame 和 setInterval 主要有以下几点区别:

1. 执行频率不同:

- requestAnimationFrame 依赖显示器的刷新频率,通常为 60Hz,对于大多数显示器每秒执行60次。

- setInterval 的执行间隔是固定的,并不依赖刷新频率,间隔时间可能高于显示器刷新频率。

2. 执行时机不同:

- requestAnimationFrame 在浏览器下一次重绘之前执行。

- setInterval 在定时器到期后尽快执行,可能导致丢帧。

3. 性能不同:

- requestAnimationFrame 不会引起多次重绘,性能更好。

- setInterval 可能引起多次重绘,性能较差,特别是间隔时间过短的情况。

4. 节流不同:

- requestAnimationFrame 自带节流功能,一般不会引起性能问题。

- setInterval 可能需要手动实现节流逻辑来避免频繁触发。

requestAnimationFrame是一个用于设置动画的API,它可以配合更新 DOM 的操作,保持最优的渲染性能。

**功能:**

- 告诉浏览器你希望执行一个动画,并请求浏览器在下次重绘之前调用指定的回调函数更新动画。

- 会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘之前不会引起任何触发重绘的操作。

**js用法:**

把需要重复更新的动画代码放入函数,然后传入requestAnimationFrame创建一个递归循环。

**优点:**

- 和浏览器刷新频率保持同步,有效避免丢帧问题。

- 多个动画或DOM操作会被合并,减少重绘次数,提升性能。

- 自带节流功能,防止频繁触发重绘和回流。

所以requestAnimationFrame是构建复杂或高性能动画的好选择。（已编辑）

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！

#2023年度创作挑战#

得收藏的HTML DOM事件和鼠标键盘事件

onabort//图像的加载被中断。

onblur//元素失去焦点。

onchange//域的内容被改变。

onclick//当用户点击某个对象时调用的事件句柄。

ondblclick//当用户双击某个对象时调用的事件句柄。

onerror//在加载文档或图像时发生错误。

onfocus//元素获得焦点。

onkeydown//某个键盘按键被按下。

onkeypress//某个键盘按键被按下并松开。

onkeyup//某个键盘按键被松开。

onload//一张页面或一幅图像完成加载。

onmousedown//鼠标按钮被按下。

onmousemove//鼠标被移动。

onmouseout//鼠标从某元素移开。

onmouseover//鼠标移到某元素之上。

onmouseup//鼠标按键被松开。

onreset//重置按钮被点击。

onresize//窗口或框架被重新调整大小。

onselect//文本被选中。

onsubmit//确认按钮被点击。

onunload//用户退出页面。

值得收藏的HTML DOM事件和鼠标键盘事件

altKey//返回当事件被触发时，"ALT" 是否被按下。

button//返回当事件被触发时，哪个鼠标按钮被点击。

clientX//返回当事件被触发时，鼠标指针的水平坐标。

clientY//返回当事件被触发时，鼠标指针的垂直坐标。

ctrlKey//返回当事件被触发时，"CTRL" 键是否被按下。

metaKey//返回当事件被触发时，"meta" 键是否被按下。

relatedTarget//返回与事件的目标节点相关的节点。

screenX//返回当某个事件被触发时，鼠标指针的水平坐标。

screenY//返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey//返回当事件被触发时，"SHIFT" 键是否被按下。

值得收藏的HTML DOM事件和鼠标键盘事件

以上内容为互联网收集感谢关注与收藏

在线咨询

上一篇：html（网页）运行本地程序（exe文件）的方法与源码
下一篇：揭开远望号火箭运输船的神秘面纱

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商