锐客网

  1. 首页 > it技术 > >

JavaScript keydown事件总结

javascriptht

最近在开发过程中遇到了一个问题，感觉可以通过监听keydown事件来解决。但是，在实践的过程中发现，我原先对于keydown事件的理解并不是很正确。所以，在详细了解过keydown事件之后，在此做个总结。
本文主要包括以下几个方面的内容：

  1. 遇到的问题
  2. keydown事件
  3. 解决方案
遇到的问题 在开发过程中，我遇到这样一个需求：
当鼠标悬浮在目标dom上的时候，鼠标需要设置成特殊的样式：
  1. 没有按住ctrl键，鼠标样式设置成样式1；
  2. 按住ctrl键，鼠标样式设置成样式2。
我的第一想法是，通过监听mousemove事件来判断鼠标是否悬浮在目标dom上。然后通过event.ctrlKey来判断此时是否按住了ctrl键：
  1. 如果没有按住，处理上述情况1；
  2. 如果按住了，处理上述情况2。
但是，只监听mousemove事件不能覆盖所有的情况。比如，首先把鼠标移动到目标dom上，此时鼠标不动，按下或者松开ctrl键，此时鼠标的样式是需要变化的。但是，我们在按下或者松开ctrl键之后并没有移动鼠标，所以不会触发mousemove事件。
【JavaScript keydown事件总结】所以，我就想通过keydown和keyup事件来监听ctrl键的按下和松开事件。
首先，我给目标dom添加了keydown事件。这时，问题就来了：keydown事件根本就没有触发。
然后，我就想试试在body上绑定keydown事件，然后通过判断event.target是否是目标dom来判断鼠标位置。
最后，我发现event.target是body元素，而不是我想要的目标dom。所以，我就开始查找资料，发现keydown事件原来和我想象中的不一样。
keydown事件 通过查阅MDN上的keydown事件，发现该事件有如下限制：
Keyboard events are only generated by ,