JavaScript Academy · 课时

事件对象

Q: 「事件对象」这节课中我会学到什么？

读取 target 和 type 等事件详情。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

读取 target 和 type 等事件详情。

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

事件参数

事件触发时，浏览器会将一个事件对象传递给您的处理函数。它包含有关发生了什么以及涉及哪些元素的详细信息。

btn.addEventListener("click", (event) => {
  console.log(event.type); // "click"
});

event.type

event.type 是事件的名称，因此一个处理函数可以针对不同的事件类型采取不同的响应。

function handle(e) {
  console.log("Got a " + e.type + " event");
}

event.target

event.target 是事件实际发源的元素，也就是用户交互所涉及的最深层元素。

list.addEventListener("click", (e) => {
  console.log(e.target); // the exact clicked element
});

event.currentTarget

event.currentTarget 是当前正在运行其监听器的元素，也就是您调用 addEventListener 的元素。

list.addEventListener("click", (e) => {
  console.log(e.currentTarget === list); // true
});

事件目标与当前监听对象的区别

事件冒泡时，target 可能是子元素，而 currentTarget 是负责监听的父元素。这种区别是事件委托的基础。

list.addEventListener("click", (e) => {
  // e.target = clicked <li>
  // e.currentTarget = the <ul>
});

事件委托

在父元素上附加一个监听器，然后使用 target.closest 找出哪个子元素被操作。与附加许多监听器相比，这种方式更易于扩展。

list.addEventListener("click", (e) => {
  const item = e.target.closest("li");
  if (item) console.log(item.dataset.id);
});

event.timeStamp

event.timeStamp 记录事件创建的时间，可用于测量事件之间的持续时间。

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

鼠标事件中的坐标

鼠标事件会提供位置数据，例如 clientX/clientY（相对于视口）以及 pageX/pageY（相对于文档）。

area.addEventListener("click", (e) => {
  console.log(e.clientX, e.clientY);
});

修饰键

e.shiftKey、e.ctrlKey、e.altKey 和 e.metaKey 等属性会告诉您哪些修饰键处于按下状态。

btn.addEventListener("click", (e) => {
  if (e.shiftKey) console.log("Shift-click");
});

event.isTrusted

由真实用户生成的事件，其 event.isTrusted 为 true；由脚本创建的事件则为 false。这有助于区分真实输入。

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

读取按键

键盘事件会提供 e.key（字符或名称），因此您可以针对特定按键作出响应。

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

快速检查

区分这两个目标。

回顾

事件对象描述事件的各项信息：type、target（事件发源的位置）和 currentTarget（监听器所在的位置）。它们之间的区别使事件委托成为可能。事件还会提供坐标、修饰键、key、timeStamp 和 isTrusted。

常见问题解答

「事件对象」课时是免费的吗？

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

「事件对象」这节课中我会学到什么？

读取 target 和 type 等事件详情。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「事件对象」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy