JavaScript keydown事件详解与实战踩坑经验分享

又踩坑了，keydown事件触发不了

今天在搞一个项目的时候，遇到了一个很头疼的问题：keydown事件死活不触发。我在这上面折腾了半天，最后才搞定。这里我就来分享一下我的踩坑经历和解决方法。

问题排查过程

首先，我是想做一个简单的键盘控制功能，比如按下方向键可以控制某个元素的移动。代码很简单：

document.addEventListener('keydown', (event) => {
  console.log('Key pressed: ', event.key);
});

结果按了半天键盘，啥反应也没有。我心想这事儿不对劲啊，于是就开始排查问题。

第一步，我先检查了浏览器的开发者工具，看看是不是有啥报错。结果一切正常，没有报错信息。然后我又怀疑是不是我的HTML结构有问题，于是把整个页面简化了一下，只留下一个空的div，还是不行。

接着，我试了试其他事件，比如click、mouseover，发现这些事件都能正常触发。这就奇怪了，为啥偏偏keydown不行呢？

后来试了下发现，原来是我的代码里有一段preventDefault，这个方法会阻止默认行为，但同时也阻止了事件的传播。我是在处理其他事件时加上了这个方法，没想到影响了keydown事件。

document.addEventListener('mousedown', (event) => {
  event.preventDefault();
  // 其他逻辑
});

这里我踩了个坑，以后得多注意这种全局的事件处理方式。

解决方案

既然找到了问题所在，那解决起来就简单多了。我只需要把preventDefault去掉或者限制它的作用范围，不让它影响到keydown事件。

最简单的办法是把preventDefault放到具体的事件处理逻辑里面，而不是全局使用。这样既可以达到阻止默认行为的效果，又不会影响到其他事件。

document.addEventListener('mousedown', (event) => {
  if (event.target.tagName === 'INPUT') {
    event.preventDefault();
  }
  // 其他逻辑
});

document.addEventListener('keydown', (event) => {
  console.log('Key pressed: ', event.key);
});

这样一来，keydown事件就能正常触发了。我试了试，果然没问题。

技术细节和原理

其实这个问题涉及到事件冒泡和捕获的概念。preventDefault方法会阻止事件的默认行为，比如点击链接跳转、表单提交等。但同时，它也会阻止事件的进一步传播，导致某些事件无法触发。

在实际开发中，我们经常需要处理多种事件，如果全局使用preventDefault，很容易造成意想不到的问题。因此，最好是在具体事件处理逻辑中使用preventDefault，避免对其他事件产生干扰。

另外，addEventListener还支持第三个参数，用来指定事件处理的方式（捕获或冒泡）。默认情况下是冒泡阶段，如果我们想在捕获阶段处理事件，可以设置为true。

document.addEventListener('keydown', (event) => {
  console.log('Key pressed: ', event.key);
}, true);

不过在这个问题中，事件的捕获和冒泡阶段并没有影响，主要还是preventDefault的问题。

总结

以上是我踩坑后的总结，希望对你有帮助。如果你有更好的方案或者遇到类似的问题，欢迎评论区交流。这个技巧的拓展用法还有很多，后续我会继续分享这类博客。