JavaScript-事件类型（键盘事件，鼠标事件，焦点事件）

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

document.onkeydown = function(event) {
// 键盘按下时触发
console.log(‘key down’);
};

document.onkeypress = function(event) {
// 键盘按住时触发
console.log(‘key press’);
};

document.onkeyup = function (event) {
// 键盘弹起时触发
console.log(‘key up’);
};

event参数
该参数为 KeyboardEvent 事件对象，其中包含按键相关的一些属性。

• type：事件类型
• key：表示按下的键盘内容是什么即键值，按下字母 ‘p’ 时，值为’p’
• code：表示键盘代码，按下字母 ‘p’ 时，值为 ‘KeyP’
• keyCode：整数，表示键码，每个键都有唯一的键码，字母 ‘p’ 的键码为80
• altKey：布尔值，表示此时的 alt 键是否也按下
• ctrKey：布尔值，表示此时的 ctr 键是否也按下
• shiftKey：布尔值，表示此时的 shift 键是否也按下
• metaKey：布尔值，windows 平台表示 Window 键是否同时按下，mac表示Command键是否同时按下
• repeat: 布尔值，如果一个键一直被按着，则其值为true，表示重复

可以通过检查这些属性来判断用户按下的是什么键，以及是否 ctrl 和 alt 等键是否同时按下:

document.onkeydown = function(event) {
// 键盘按下是触发
console.log('key down: ’ + event.key);
if (event.altKey) {
console.log(‘alt is active’);
}
if (event.shiftKey) {
console.log(‘shift is active’);
}
};

鼠标事件

事件	发生时机
onclick	鼠标单击对象时触发的事件
ondblclick	鼠标双击对象时触发的事件
onmousedown	鼠标按钮被按下时触发的事件
onmousemove	鼠标被移动时触发的事件
onmouseout	鼠标离开监听该事件的元素或子元素时触发的事件
onmouseover	鼠标移动到监听该事件的元素或子元素时触发的事件
onmouseup	鼠标按键被松开时触发的事件

示例：

触发时的参数为 MouseEvent 对象类型，MouseEvent对象中包含下面比较有用的属性：

• type: 事件类型，如 mosemove 或者mousedown
• button：整型，触发鼠标事件时按下的按钮编号
• buttons：整型，触发鼠标事件时弹起来的按钮编号
• clientX：鼠标指针在 DOM 内容区的X坐标
• clientY：鼠标指针在 DOM 内容区的Y坐标
• offsetX：鼠标指针相对父节点填充边缘的X坐标
• offsetY: 鼠标指针相对父节点填充边缘的Y坐标
• screenX: 鼠标指针在全局屏幕的X坐标
• screenY: 鼠标指针在全局屏幕的Y坐标
• pageX: 鼠标指针在整个DOM内容（包括分页）的X坐标
• pageY: 鼠标指针在整个DOM内容（包括分页）的Y坐标
• altKey: 布尔值，表示此时的alt键是否也按下
• ctrKey: 布尔值，表示此时的alt键是否也按下

最后

喜欢的话别忘了关注、点赞哦~

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
存中…(img-mFDty9f6-1713308705692)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！