dom事件自定义事件 focuslose

162 阅读1分钟

我是超级无敌杀人王啊啊啊!!!

我在写热键事件的时候发现一个问题:
我需要在注册了热键事件的元素无法再使用键盘事件时(通常为失去焦点)清理已经按下的按键的记录。
但当dom结构为不可使用focus的父元素中有多个可使用focus的后代元素时。如果使用focusout,将会反复执行;而如果在父元素中使用blur,将不会被触发。

于是我希望能加入一个事件,当该元素完全无法使用键盘事件时,执行某个动作。 如下图第二行:

image.png

我需要重写添加事件监听器的 addEventListener 函数, 还有新增事件类型的函数。 很简单:

image.png

然后定义focuslose的注册过程,以及如何触发: 值得注意的一点是,当focus改变时,document.activeElement会临时挂到body上;所以要写一个setTimeout,另它的动作放到下一个任务队列里才行(当然你也可以用Promise,不过setTimeout的兼容性更好点)

image.png

最后看看效果:

动画.gif