前端面试必备 | JavaScript事件篇（P1-10）

文章目录

1. 什么是JavaScript事件？请解释事件流的概念。
2. 事件委托是什么？为什么要使用事件委托？
3. 如何在HTML元素上添加事件监听器？请说明addEventListener和on事件属性的区别。
4. 什么是事件冒泡和事件捕获？请解释它们的区别。
5. 如何阻止事件的默认行为？请分别说明如何使用preventDefault和return false来阻止默认行为。
6. 如何停止事件的传播？请说明如何使用stopPropagation和stopImmediatePropagation来停止事件传播。
7. 请解释一下事件委托中的事件目标（event target）和事件当前元素（current target）的区别。
8. 如何使用事件委托处理动态添加的元素？
9. 请解释一下事件代理（Event delegation）的概念，并说明它的优势和适用场景。
10. 请列举一些常见的鼠标事件和键盘事件，并说明它们的用途。

1. 什么是JavaScript事件？请解释事件流的概念。

JavaScript事件是指在网页中发生的交互动作或特定的系统通知，例如

• 用户的鼠标点击
• 键盘输入
• 页面加载完成
• ......

事件可以被JavaScript代码捕获和处理，以响应用户的操作或特定的页面状态。

事件流（Event flow）是描述事件在DOM中传播的过程。当事件发生在DOM元素上时，它会从触发元素开始沿着DOM树通过一系列的阶段进行传播，直到到达文档根部。

这个传播过程包括以下三个阶段：

1. 捕获阶段（Capturing phase）：事件从文档根部开始经过一系列祖先元素向下传播，直到达到事件实际发生的目标元素。在捕获阶段，事件不会触发一般的事件处理程序，但可以使用事件捕获方式绑定的处理程序。

2. 目标阶段（Target phase）：事件到达目标元素后进入目标阶段。在这个阶段，事件处理程序会响应事件。比如，如果用户单击了一个按钮，单击事件将在目标元素上触发。

3. 冒泡阶段（Bubbling phase）：当事件在目标元素上触发后，它会沿着DOM树从目标元素开始向上传播，直到达到文档根部。在这个阶段，事件处理程序可以通过事件冒泡方式绑定到祖先元素上。

事件流的传播顺序是从文档根部开始捕获阶段，然后是目标阶段，最后是冒泡阶段。这意味着事件首先在父元素上被捕获，到达目标元素后触发，并最终在父元素上冒泡。

在JavaScript中，可以通过使用addEventListener方法来绑定事件处理程序，并指定是在捕获阶段还是冒泡阶段处理事件。默认情况下，事件处理程序会在冒泡阶段触发。例如：

element.addEventListener('click', handleClick, false); // 在冒泡阶段处理click事件
element.addEventListener('click', handleClick, true); // 在捕获阶段处理click事件

了解事件流的概念可以帮助开发者更好地理解事件的传播过程，合理地选择事件处理的方式，并处理事件冲突和阻止事件传播等问题。

2. 事件委托是什么？为什么要使用事件委托？

事件委托（Event delegation）是一种在JavaScript中处理事件的技术，它利用事件冒泡的特性将事件处理程序绑定到一个父元素上，而不是直接绑定到多个子元素上。

当一个事件发生在DOM树中的一个子元素上时，事件将沿着DOM树向上传播，触发绑定在父元素上的事件处理程序。这样，通过在父元素上捕获事件，可以有效地处理子元素上的事件，而不需要给每个子元素都绑定事件处理程序。

使用事件委托的好处包括：

1. 性能优化：相比于给每个子元素都绑定事件处理程序，将事件处理程序绑定到父元素上可以减少事件处理程序的数量，从而减少内存消耗和处理时间。

2. 动态元素支持：当动态地添加或删除子元素时，事件委托可以自动适应这些变化，不需要重新绑定事件处理程序。

3. 简化代码维护：通过将事件处理程序绑定到父元素上，可以减少在JavaScript代码中管理事件处理程序的数量，从而简化代码维护和改动。

4. 处理子元素共享事件：当多个子元素共享相同的事件处理逻辑时，可以通过事件委托将它们的事件委托给父元素的一个事件处理程序，避免代码的重复和冗余。

使用事件委托的典型例子是处理列表或表格中的点击事件。将点击事件处理程序绑定到整个列表或表格的父元素上，并通过事件对象的属性（如event.target）来确定具体被点击的子元素。这样可以避免给列表或表格的每个子元素都绑定事件处理程序，提高代码效率和可维护性。

在JavaScript中，可以通过监听父元素上的事件来实现事件委托，如下所示：

const parentElement = document.getElementById('parent');

parentElement.addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    // 处理子元素被点击的逻辑
    // event.target 就是被点击的子元素
  }
});

通过使用事件委托，可以更高效地处理事件，提高代码性能和可维护性，并适应动态添加或删除子元素的场景。

3. 如何在HTML元素上添加事件监听器？请说明addEventListener和on事件属性的区别。

在HTML元素上添加事件监听器有两种常用的方式：使用addEventListener方法和使用on事件属性。

它们有一些区别，如下所示：

1. addEventListener方法：

addEventListener是DOM元素的方法，用于向指定的元素添加事件监听器。它接受三个参数：事件类型、事件处理函数和一个可选的布尔值参数，用于设置事件的捕获或冒泡阶段。

element.addEventListener(eventType, eventHandler, useCapture);

• eventType：要监听的事件类型，比如'click'、'keydown'等。
• eventHandler：处理事件的函数，可以是命名函数或匿名函数。
• useCapture：可选参数，布尔值，表示事件是在捕获阶段（true）还是冒泡阶段（false）触发，默认为false（冒泡阶段）。

示例：

const button = document.getElementById('myButton');
button.addEventListener('click', handleClick);

2. on事件属性：

on事件属性是HTML元素的属性，用于直接在HTML标签中指定事件处理程序。它可以通过HTML标签的属性或使用JavaScript来设置。

<button onclick="handleClick()">Click me</button>

或者通过JavaScript设置：

button.onclick = function() {
  // 处理点击事件的逻辑
};

• onclick：指定事件类型和事件处理函数，事件类型以on开头，如'click'变成'onclick'。

注意事项：

• 使用on事件属性设置的事件处理程序只能设置一个，会覆盖之前设置的事件处理程序。
• 使用addEventListener方法可以添加多个事件处理程序，它们会按照添加的顺序执行。

总结：

• addEventListener方法提供了更灵活和可扩展的方式来添加事件监听器，可以添加多个事件处理程序，并且可以灵活地指定事件阶段（捕获或冒泡）。
• on事件属性是直接在HTML中指定事件处理程序的一种快捷方式，但在可维护性和扩展性方面有一些限制。

建议在现代JavaScript开发中更倾向于使用addEventListener方法，因为它提供了更好的控制和灵活性，并且可以将HTML和JavaScript代码分离，更好地遵循分离关注点的设计原则。

4. 什么是事件冒泡和事件捕获？请解释它们的区别。

事件冒泡和事件捕获是JavaS