JavaScript Academy · 课时

键盘和鼠标事件

Q: 「键盘和鼠标事件」这节课中我会学到什么？

处理点击、按键和指针事件。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

处理点击、按键和指针事件。

键盘和鼠标事件 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

输入事件类别

鼠标和键盘事件让您能够构建丰富的交互效果。每个类别都有专门的事件类型和属性。

点击事件

click 会在主按键按下并释放时触发。按钮和链接通过键盘激活时也会触发它，因此具有良好的无障碍性。

btn.addEventListener("click", () => {
  console.log("activated");
});

双击和上下文菜单

dblclick 会在双击时触发，而 contextmenu 会在右键单击时触发（通常会将其取消，以显示自定义菜单）。

el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());

鼠标按下、松开和移动

这些事件提供了细粒度的控制：按下、松开和移动。它们是拖动交互的基础。

box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));

mouseenter 与 mouseover

mouseenter 不会冒泡，也不会受子元素边界影响；而 mouseover 会冒泡，并且在鼠标移到后代元素上时触发。对于悬停效果，通常应使用 mouseenter。

el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));

鼠标按键类型

button 属性会说明触发事件的是哪个按键：0 表示左键，1 表示中键，2 表示右键。

el.addEventListener("mousedown", (e) => {
  if (e.button === 2) console.log("right button");
});

按键按下和松开

keydown 会在按键按下时触发（按住时会重复触发）；keyup 会在按键松开时触发。keypress 已被弃用。

input.addEventListener("keydown", (e) => {
  console.log("down: " + e.key);
});

event.key

e.key 表示按键的逻辑值：可以是像 "a" 这样的字符，也可以是像 "Enter"、"Escape" 或 "ArrowUp" 这样的名称。

input.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("cancel");
});

event.code

e.code 表示按键的物理位置（例如 "KeyA" 或 "Space"），与键盘布局无关。游戏控制应使用它。

window.addEventListener("keydown", (e) => {
  if (e.code === "Space") console.log("jump");
});

键盘快捷键

将修饰键标志与 key 结合起来即可检测快捷键，并调用 preventDefault 来覆盖浏览器的默认行为。

document.addEventListener("keydown", (e) => {
  if (e.ctrlKey && e.key === "s") {
    e.preventDefault();
    console.log("save");
  }
});

按住按键时的 repeat

当按键被按住而导致 keydown 重复触发时，e.repeat 为 true，这样您就可以忽略自动重复。

window.addEventListener("keydown", (e) => {
  if (e.repeat) return;
  console.log("first press of " + e.key);
});

快速检查

请选择与键盘布局无关的属性。

回顾

鼠标事件包括 click、dblclick、mousedown/mouseup/mousemove，以及适合悬停效果的 mouseenter/mouseleave；button 用于标识具体按键。键盘事件使用 keydown/keyup，其中 e.key 表示字符或名称，e.code 表示物理按键，e.repeat 表示按键是否被按住。

常见问题解答

「键盘和鼠标事件」课时是免费的吗？

是的 — 「键盘和鼠标事件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。

「键盘和鼠标事件」这节课中我会学到什么？

处理点击、按键和指针事件。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「键盘和鼠标事件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy