前端监听键盘事件

起来改bug

已于 2023-03-06 22:05:23 修改

阅读量1.3k

点赞数

分类专栏： JS reactJs 文章标签： react.js javascript 前端

于 2023-03-06 16:09:18 首次发布

本文链接：https://blog.csdn.net/q553866469/article/details/129364001

版权

JS 同时被 2 个专栏收录

23 篇文章

订阅专栏

reactJs

18 篇文章

订阅专栏

文章讲述了在React中如何使用useEffect来监听keydown事件，并在组件卸载时正确清理。特别提到了Ctrl+F1事件的监听方法，通过判断event对象的ctrlKey和keyCode属性来实现。此外，还强调了事件处理函数的优化和其它键盘事件的类似处理方式。

摘要由CSDN通过智能技术生成

需求就如题所示

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即可监听成功；

PS：其他键盘事件同理可操作；