Frontend Academy · 课时

addEventListener 与事件对象

添加事件监听器，接收 Event 对象，使用 preventDefault 和 stopPropagation，并了解事件冒泡。

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

什么是事件？

事件是浏览器在某些事情发生时发出的信号：用户点击、按键、移动鼠标、页面加载完成，或网络请求完成。JavaScript 会通过附加事件监听器来响应事件。

addEventListener 语法

element.addEventListener(type, handler) 会附加一个函数，使其在事件触发时运行。该处理函数会接收一个 Event 对象，其中包含事件详情。

const button = document.querySelector('#submit');
button.addEventListener('click', (event) => {
  console.log('Button clicked!', event);
});

常见事件类型

鼠标：click、dblclick、mouseenter、mouseleave、mousemove。键盘：keydown、keyup、keypress。表单：submit、input、change、focus、blur。文档：DOMContentLoaded、load。窗口：resize、scroll。

// Form events:
input.addEventListener('input', (e) => console.log(e.target.value));
form.addEventListener('submit', handleSubmit);

// Window events:
window.addEventListener('resize', () => console.log(window.innerWidth));

事件对象

每个处理函数都会接收一个事件对象。重要属性包括：e.target（触发事件的元素）、e.currentTarget（附加监听器的元素）、e.type（事件名称）以及 e.timeStamp。

document.addEventListener('click', (e) => {
  console.log(e.type);          // 'click'
  console.log(e.target);        // element that was clicked
  console.log(e.currentTarget); // element with the listener (document)
  console.log(e.timeStamp);     // ms since page load
});

preventDefault()

event.preventDefault() 会阻止浏览器执行默认操作。您可以使用它来阻止表单提交、阻止链接跳转，或在游戏中阻止右键菜单。

form.addEventListener('submit', (e) => {
  e.preventDefault(); // stop page reload
  // validate and process form data with JavaScript
});

link.addEventListener('click', (e) => {
  e.preventDefault(); // handle SPA navigation manually
  router.navigate(e.target.href);
});

stopPropagation()

event.stopPropagation() 会阻止事件沿 DOM 树向上冒泡。当内部元素的处理函数不应触发外部元素的处理函数时，可以使用它。

modal.addEventListener('click', (e) => {
  e.stopPropagation(); // don't close modal when clicking inside it
});
document.addEventListener('click', () => {
  closeModal(); // only fires for clicks outside modal
});

事件冒泡

事件会向上冒泡——在目标元素上触发后，会依次在父元素、祖父元素上触发，直到 document。这正是事件委托的工作方式：在父元素上附加一个监听器，并使用 e.target 找出实际被点击的子元素。

// One listener handles all button clicks in the container:
document.querySelector('.btn-group').addEventListener('click', (e) => {
  if (e.target.matches('button')) {
    console.log('Clicked:', e.target.textContent);
  }
});

事件委托模式

事件委托是指在父元素上监听事件，而不是为每个子元素分别附加监听器。这种方式效率更高，并且能够自动处理动态添加的子元素。

// Instead of:
list.querySelectorAll('li').forEach(li => li.addEventListener('click', handleClick));

// Use delegation:
list.addEventListener('click', (e) => {
  if (e.target.closest('li')) handleClick(e);
});

键盘事件

键盘事件会在按键时触发。现代代码应使用 e.key（例如 'Enter'、'Escape'、'a' 这样的字符串）。旧代码使用 e.keyCode，但它已经被弃用。e.metaKey、e.ctrlKey 和 e.shiftKey 用于检测修饰键。

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
  if (e.key === 'Enter' && e.ctrlKey) submitForm();
});

移除事件监听器

使用 removeEventListener 可以移除监听器。处理函数必须是同一个函数引用，匿名函数无法被移除。在 React/Vue 中，通常不需要手动管理这些监听器。

function handleScroll() { /* ... */ }
window.addEventListener('scroll', handleScroll);
// Later, when done:
window.removeEventListener('scroll', handleScroll);

once 选项

将 { once: true } 作为第三个参数传入，即可在监听器触发一次后自动将其移除。这适合用于启动画面关闭等只执行一次的操作。

document.querySelector('#start').addEventListener('click', startApp, { once: true });

capture 选项

默认情况下，监听器会在冒泡阶段（向上）触发。传入 { capture: true } 后，监听器会在捕获阶段（向下，在目标元素自己的监听器之前）触发。

快速检查

哪个方法会阻止浏览器对事件执行默认行为？

回顾：DOM 事件

addEventListener(type, handler) 用于附加监听器。Event 对象提供 target、type 和控制方法。preventDefault() 会阻止默认行为。stopPropagation() 会阻止冒泡。使用事件委托可以提高效率并处理动态子元素。移除监听器可以防止内存泄漏。

常见问题解答

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

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

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

添加事件监听器，接收 Event 对象，使用 preventDefault 和 stopPropagation，并了解事件冒泡。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

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

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

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

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

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

此课程中的所有课时

← 返回 Frontend Academy