JavaScript Academy · 课时

addEventListener 基础

Q: 「addEventListener 基础」这节课中我会学到什么？

为元素附加事件处理器。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为元素附加事件处理器。

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

响应事件

事件让您的代码能够响应用户操作，例如点击、按键和提交表单。addEventListener 是订阅事件的标准方式。

基本语法

使用事件名称和处理函数调用 addEventListener。每次事件发生时，处理函数都会运行。

const btn = document.querySelector("button");
btn.addEventListener("click", () => {
  console.log("Clicked!");
});

命名处理函数

您可以传入一个命名函数。这样可以让代码更有条理，更重要的是，之后可以移除该监听器。

function handleClick() {
  console.log("Clicked!");
}
btn.addEventListener("click", handleClick);

多个监听器

与旧式的 onclick 属性不同，您可以为同一事件附加多个监听器，而不会相互覆盖。

btn.addEventListener("click", logClick);
btn.addEventListener("click", trackAnalytics);

removeEventListener

要停止监听，请使用添加监听器时所用的相同事件名称和函数引用调用 removeEventListener。

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);

无法移除匿名函数

内联箭头函数每次都会创建新的引用，因此之后无法将其移除。如果需要移除，请使用命名引用。

btn.addEventListener("click", () => doThing());
// no way to remove this exact listener

一次性选项

传入 { once: true } 后，监听器触发一次便会自动移除。

btn.addEventListener("click", init, { once: true });

捕获选项

默认情况下，监听器会在冒泡阶段运行。{ capture: true } 会让它们改为在捕获阶段运行。

parent.addEventListener("click", handler, { capture: true });

被动选项

{ passive: true } 表示您不会调用 preventDefault，从而让浏览器能够优化滚动性能。

window.addEventListener("scroll", onScroll, { passive: true });

信号选项

AbortController 的信号可以通过中止操作来移除一个或多个监听器，这对清理工作很方便。

const controller = new AbortController();
btn.addEventListener("click", handler, { signal: controller.signal });
controller.abort(); // removes the listener

处理函数中的当前对象引用

在普通函数处理函数中，this 指向附加监听器的元素。箭头函数不会重新绑定 this。

btn.addEventListener("click", function () {
  console.log(this); // the button element
});

快速检查

测试移除规则。

回顾

addEventListener(type, handler, options) 用于订阅事件，并支持多个监听器。使用相同的引用调用 removeEventListener 移除监听器，因此应优先使用命名函数。实用的选项包括 once、capture、passive 和 signal。在普通处理函数中，this 是目标元素。

常见问题解答

「addEventListener 基础」课时是免费的吗？

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

「addEventListener 基础」这节课中我会学到什么？

为元素附加事件处理器。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「addEventListener 基础」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy