需求就如题所示
1.监听
在react中监听如下：
useEffect(() => {
window.addEventListener('keydown', getKeyDown);
return () => {
window.removeEventListener('keydown', getKeyDown); // 销毁
};
}, [])keydown事件是键盘的相关事件，我们主动去监听一下，然后别忘了去销毁， 然后有个写法：
在useEffect中使用return返回了一个清除监听的函数，实践了一下return的执行时机，发现是在页面切走的时候，也就是说，当前的组件被销毁的时候执行，相当于卸载的钩子函数。
2.事件
const getKeyDown = useCallback((e: any) => {
console.log(e);
if (e.ctrlKey && e.keyCode === 112) {
console.log('ctrKey + f1');
}
}, [])我们把事件打印出来看一下，我们要监听的是Ctrl + F1事件，我们看下：
如上图所示：
有几个点说一下，我是按下了Ctrl + F1，然后看到了一个参数，keyCode这个参数对比下可以，就可以知道，这个是F1的code值，还有其他一些值，像ctrlKey、altKey等，他们就是你按F1的时候同时发生的键盘事件，这样我们就好处理了，直接判断ctrlKey为True且 keyCode === 112即可监听成功；文章来源：https://www.toymoban.com/news/detail-524171.html
PS：其他键盘事件同理可操作；文章来源地址https://www.toymoban.com/news/detail-524171.html
到了这里，关于前端监听键盘事件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
