javascript - 没有输入框，怎么监听键盘keydown事件？

Question

想设置快捷键，但是没有输入框，不知道怎么监听keydown事件

谢谢

Answer 1

监听页面document的keydown事件

Answer 2

keydown事件不一定只是绑定某个input输入框，它可以直接绑定整个document.

Answer 3

所有的HTMLElement类, 以及Document, Window类都实现了EventTarget接口, EventTarget接口定义了一个方法来监听事件:

addEventListener(type: string, listener: EventListenerOrEventListenerObject, useCapture?: boolean): void;

其中第一个参数为要监听在事件名称, 第二个参数为触发执行的函数指针, 第三个是要触发的阶段.

每个事件都要从最顶层Window向下传播到Document到target.parentNode, 这一阶段称为CAPTURE, 然后传播到target, 这一阶段称为TARGET, 再从target.parentNode传播到Document到Window, 这一阶段称为BUBBLE. 在任何一个阶段调用事件的stopPropagation方法都会停止向后传播事件.

因此如果要监听页面的某个事件而不依赖于target元素, 可以在window或者document上监听, 并且第三个参数useCapture设置为true.

对于keydown事件, 触发事件的target为当前的activeElement, 如果一个元素不可以被focus, 即tabIndex属性小于0, 则不可以触发keydown事件(但是可以手动dispatchEvent).