前端经典面试题合集, JS 中怎么阻止事件冒泡和事件默认行为?

QA

Step 1

Q:: JS 中怎么阻止事件冒泡和事件默认行为？

A:: 在 JavaScript 中，可以使用 event.stopPropagation() 方法来阻止事件冒泡，使用 event.preventDefault() 方法来阻止事件的默认行为。例如：

 
// 阻止事件冒泡
button.addEventListener('click', function(event) {
    event.stopPropagation();
    // 其他逻辑
});
 
// 阻止事件默认行为
form.addEventListener('submit', function(event) {
    event.preventDefault();
    // 其他逻辑
});

事件冒泡是指事件从目标元素向上冒泡至 DOM 树的父级元素，而默认行为是浏览器对特定事件的默认处理方式。

Step 2

Q:: 事件冒泡和事件捕获的区别是什么？

A:: 事件冒泡和事件捕获是事件传播的两种方式。事件冒泡是从事件的目标元素开始向上冒泡到父级元素，而事件捕获则相反，是从文档的根节点向下捕获到目标元素。可以通过 addEventListener 的第三个参数来指定是使用捕获还是冒泡模式：

 
document.getElementById('example').addEventListener('click', handler, true); // 捕获阶段

如果第三个参数为 true，事件会在捕获阶段触发，否则在冒泡阶段触发。

Step 3

Q:: 如何阻止捕获和冒泡阶段中的事件传播？

A:: 无论是捕获阶段还是冒泡阶段，都可以使用 event.stopPropagation() 来阻止事件传播。这意味着事件不会再继续传播到其他元素，无论是在捕获阶段还是冒泡阶段。

Step 4

Q:: 为什么要阻止事件的默认行为？

A:: 有时候，开发者可能希望阻止浏览器对某些用户行为的默认响应，例如在表单提交时不希望刷新页面，而是通过 JavaScript 处理表单数据。这时就可以使用 event.preventDefault() 来阻止默认行为。

用途

面试这类问题主要是为了评估候选人对 JavaScript 事件模型的理解，尤其是在处理用户交互时对事件的掌控能力。事件冒泡、捕获以及阻止默认行为都是前端开发中常见的操作。实际生产环境中，这些知识在实现复杂的用户交互（如自定义表单验证、动态 UI 更新等）时非常有用。此外，它们对于避免事件重复触发、优化事件处理性能也很关键。\n

相关问题

🦆

如何在一个元素上同时监听捕获和冒泡阶段的事件?▷

可以通过在同一个元素上分别绑定两个事件监听器，一个监听捕获阶段，另一个监听冒泡阶段。例如：

 
element.addEventListener('click', handler, true); // 捕获阶段
 
 element.addEventListener('click', handler, false); // 冒泡阶段

🦆

什么是事件委托?它的优点是什么?▷

事件委托是一种通过利用事件冒泡机制来处理子元素事件的技术，而不是在每个子元素上添加事件监听器。例如，使用一个父级元素的点击事件来处理所有子元素的点击事件。事件委托的主要优点是减少内存占用和提高性能，因为它减少了绑定的事件处理器的数量。

🦆

如何区分事件触发的目标元素和当前处理事件的元素?▷

可以通过 event.target 和 event.currentTarget 来区分。event.target 指向事件触发的元素，而 event.currentTarget 指向当前正在处理事件的元素。例如：

 
button.addEventListener('click', function(event) {
    console.log('Target:', event.target);
    console.log('CurrentTarget:', event.currentTarget);
});

如何提高 webpack 的打包速度什么是 webpack它有什么作用