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

QA

Step 1

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

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

 
document.getElementById('myElement').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault(); // 阻止事件默认行为
});

Step 2

Q:: 什么是事件冒泡？

A:: 事件冒泡是指事件从最具体的元素（事件的目标元素）开始触发，然后逐级向上传播到最不具体的元素（通常是文档对象）。这种机制允许在父级元素上捕获事件，方便事件处理。

Step 3

Q:: 什么是事件捕获？

A:: 事件捕获是事件流的另一个阶段，与事件冒泡相反。在事件捕获阶段，事件从最不具体的元素开始向下传播到目标元素。可以通过在 addEventListener 的第三个参数传入 true 来设置事件处理程序在捕获阶段触发。

 
document.getElementById('myElement').addEventListener('click', function(event) {
  console.log('捕获阶段');
}, true);

Step 4

Q:: 如何在 JavaScript 中添加和移除事件监听器？

A:: 可以使用 addEventListener 方法添加事件监听器，使用 removeEventListener 方法移除事件监听器。例如：

 
document.getElementById('myElement').addEventListener('click', handleClick);
function handleClick(event) {
  console.log('Element clicked');
}
document.getElementById('myElement').removeEventListener('click', handleClick);

Step 5

Q:: 解释一下 JavaScript 中的事件委托？

A:: 事件委托是一种使用事件冒泡机制的技术。通过在父元素上添加一个事件监听器，可以管理其所有子元素的事件，而不需要在每个子元素上单独添加监听器。这有助于减少内存消耗，提高性能。例如：

 
document.getElementById('parentElement').addEventListener('click', function(event) {
  if (event.target.matches('.childElement')) {
    console.log('Child element clicked');
  }
});

用途

面试中考察这些内容是为了评估候选人对事件模型和事件处理机制的理解。这些概念在实际生产环境中广泛使用，特别是在处理用户交互和动态更新界面时。例如，在大型单页应用程序（SPA）中，需要频繁地处理事件冒泡和阻止默认行为，以确保用户界面按预期工作并提高性能。\n

相关问题

🦆

解释 JavaScript 中的事件循环机制.▷

事件循环（Event Loop）是 JavaScript 处理异步操作的机制。它负责将异步事件的回调函数推入调用栈中以供执行，确保非阻塞操作和响应用户交互。例如：

 
console.log('Start');
setTimeout(() => {
  console.log('Callback');
}, 0);
console.log('End');

输出顺序为：Start, End, Callback。

🦆

什么是闭包?如何在事件处理程序中使用闭包?▷

闭包是指一个函数可以访问其词法作用域中的变量，即使这个函数在其词法作用域之外执行。在事件处理程序中使用闭包，可以确保处理程序访问正确的变量值。例如：

 
function createHandler(message) {
  return function() {
    console.log(message);
  };
}
var btn = document.getElementById('myButton');
btn.addEventListener('click', createHandler('Button clicked!'));

🦆

如何处理事件触发频率过高的问题?▷

可以通过防抖（debounce）或节流（throttle）技术来控制事件触发频率。例如，防抖技术可以用于搜索输入框，减少请求次数：

 
function debounce(fn, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(fn, delay);
  };
}
inputElement.addEventListener('input', debounce(function() {
  console.log('Input event');
}, 300));