前端面试中常见的DOM事件问题是什么？

DOM事件常见问题及解析

在前端开发面试中,DOM（Document Object Model）事件相关的问题几乎是必考内容，无论是初级还是高级岗位，面试官常通过这类问题考察候选人的基础知识掌握程度以及实际编码能力。前端面试中常见的DOM事件问题是什么？ 核心答案通常包括：事件传播机制、事件委托、事件对象（Event）的属性与方法、自定义事件以及事件解绑等，以下将逐一解析这些高频考点，帮助你系统梳理知识，提升面试通过率。

前端面试中常见的DOM事件问题是什么？

事件传播机制：捕获阶段、目标阶段、冒泡阶段

问题示例：
“请解释DOM事件传播的三个阶段，并说明如何阻止事件冒泡？”

解析：
DOM事件遵循“捕获→目标→冒泡”的传播流程：

捕获阶段：事件从window对象逐级向下传递至目标元素的父级；
目标阶段：事件到达目标元素；
冒泡阶段：事件从目标元素逐级向上冒泡至window。

阻止冒泡可通过event.stopPropagation()方法实现，而若需完全阻止默认行为（如链接跳转），还需调用event.preventDefault()。

可信度支撑：
此机制由W3C标准定义，是理解事件代理、跨浏览器兼容性等问题的基石，常见于React/Vue等框架的事件处理逻辑中。

事件委托（Event Delegation）

问题示例：
“如何用事件委托优化动态列表的点击事件绑定？”

解析：
事件委托利用事件冒泡，将子元素的事件监听器绑定到父容器，一个动态生成的列表，只需在父元素监听click事件，通过event.target判断实际点击的子元素。

优势：

减少内存占用（尤其对动态增删的元素）；
简化代码逻辑,避免重复绑定。

示例代码：

document.getElementById('parent').addEventListener('click', (e) => {
  if (e.target.matches('.child-item')) {
    console.log('Clicked item:', e.target.dataset.id);
  }
});

事件对象（Event）的常用属性与方法

问题示例：
“如何获取事件触发时的鼠标坐标或键盘按键值？”

解析：
事件对象event包含丰富信息，常见属性包括：

坐标相关：clientX/clientY（视口坐标）、pageX/pageY（页面坐标）；
按键相关：event.key（按键字符）、event.keyCode（已废弃，推荐用key）；
目标元素：event.target（实际触发事件的元素）与event.currentTarget（绑定事件的元素）。

应用场景：
拖拽交互、键盘快捷键实现、精准点击定位等。

自定义事件（Custom Event）

问题示例：
“如何在不依赖框架的情况下实现组件间通信？”

解析：
通过CustomEvent接口可创建并派发自定义事件：

// 创建自定义事件
const myEvent = new CustomEvent('dataLoaded', { detail: { id: 123 } });
// 派发事件
document.dispatchEvent(myEvent);
// 监听事件
document.addEventListener('dataLoaded', (e) => {
  console.log('Received data:', e.detail.id);
});

用途：
适用于模块解耦、跨组件通信等场景，尤其在原生JavaScript项目中替代Vue/React的发布-订阅模式。

事件解绑与内存泄漏

问题示例：
“为何移除事件监听器时需保留函数引用？如何避免内存泄漏？”

解析：
若通过匿名函数绑定事件，后续无法通过removeEventListener解绑，导致内存泄漏，正确做法是：

function handleClick() { /* ... */ }
element.addEventListener('click', handleClick);
// 解绑时需传入同一函数引用
element.removeEventListener('click', handleClick);

注意事项：