前端 JavaScript 进阶面试题, JavaScript 事件冒泡和捕获的区别是什么?默认是冒泡还是捕获?

Step 1

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

A:: 在 JavaScript 中，事件处理模型包括两个阶段：捕获阶段和冒泡阶段。事件捕获阶段是事件从根节点向目标节点传播的过程，而事件冒泡阶段是事件从目标节点向根节点反向传播的过程。默认情况下，事件处理是采用冒泡阶段。

Step 2

Q:: 如何阻止事件冒泡？

A:: 可以使用 event.stopPropagation() 方法来阻止事件冒泡。这意味着事件不会从目标节点传播到其父节点，从而不会触发上层的事件处理程序。

Step 3

Q:: 如何阻止事件的默认行为？

A:: 可以使用 event.preventDefault() 方法来阻止事件的默认行为。例如，点击链接默认会导航到新页面，但使用 event.preventDefault() 可以阻止这种行为。

Step 4

Q:: 如何在捕获阶段处理事件？

A:: 在添加事件监听器时，可以传入第三个参数 true 或 { capture: true }，这样事件处理程序将在捕获阶段被触发。例子：element.addEventListener('click', handler, true);