在前端JavaScript代码中，事件冒泡与捕获是指当一个事件触发在DOM树中的某一节点时，该事件可以在父节点与子节点之间传递的过程。事件冒泡是事件从触发的元素开始，逐层向上传递到DOM树根节点的过程；而事件捕获则是事件从DOM树的根节点开始，逐层向下传递至触发事件的元素的过程。在JavaScript中，可以通过addEventListener方法来实现事件的捕获与冒泡。
事件冒泡是事件处理的默认流程。例如，当在一个按钮上点击时，如果按钮有点击事件处理程序，那么这个事件会从按钮传递到其父元素，如果父元素也有点击事件处理程序，那么该事件继续传递，以此类推，直至传递到<html>元素或者document对象。这一机制使得我们可以在父元素上设置事件处理程序，来监听子元素上的事件，这有助于减少事件处理器的数量，从而提高程序性能。
一、事件捕获的实现
在JavaScript中，addEventListener()方法用于在指定元素上绑定事件处理程序。该方法接受三个参数：事件名称、事件处理函数和一个布尔值。其中，布尔值参数用于指定事件是在捕获阶段处理还是在冒泡阶段处理。当该参数为true时，表示在捕获阶段调用事件处理程序；当该参数为false时（或省略），表示在冒泡阶段调用事件处理程序。
为了实现事件捕获，可以在父元素上绑定事件处理程序，并将addEventListener的第三个参数设置为true。这样，当子元素上发生事件时，可以在事件到达子元素之前，先由父元素捕获处理该事件。
二、事件冒泡的实现
与事件捕获相反，在事件冒泡阶段，可以通过将addEventListener方法的第三个参数设置为false（或不设置，因为false是其默认值），在子元素触发事件后，让事件沿着DOM树向上冒泡，从而使得父元素可以对子元素触发的事件进行处理。
使用事件冒泡机制，可以对多个元素产生的事件进行统一处理。例如，在一个列表中，可以只在列表的父元素上设置点击事件监听器，来处理所有列表项的点击事件，这样既减少了事件监听器的数量，也便于管理。
三、阻止事件冒泡与捕获
在某些情况下，可能需要阻止事件继续冒泡或捕获。这时，可以在事件处理函数中使用event.stopPropagation()方法。这个方法可以阻止事件进一步传播，无论是冒泡还是捕获阶段。但需要注意的是，这并不会阻止当前元素上的其他事件处理程序被执行。
还有一个event.stopImmediatePropagation()方法，它除了具有stopPropagation()的所有功能外，还可以阻止同一个事件的其他监听器被调用。如果有多个事件处理函数绑定到同一个事件上，且不希望其他处理函数被执行，可以使用这个方法。
四、事件委托
事件委托是一种在父元素上设置事件监听器以处理子元素事件的模式。这种模式利用了事件冒泡的特性，只在容器元素上设置一个事件监听器来管理所有子元素的相应事件。这种技术不仅可以提高性能，还便于对事件监听器的管理。
事件委托的实现通常依赖于event.target属性，该属性返回触发事件的元素。通过检查event.target，可以确定事件是在哪个子元素上触发的，进而执行相应的事件处理逻辑。
通过合理利用事件冒泡与捕获机制，在前端开发中可以实现更加灵活和高效的事件处理方案。理解和掌握这两种机制，对于深入理解DOM事件模型和提升前端开发能力至关重要。
相关问答FAQs：
什么是前端 JavaScript 代码中的事件冒泡和捕获？如何实现它们？
事件冒泡和捕获是前端 JavaScript 中常用的事件处理机制。事件冒泡是指当一个元素触发了某个事件时，该事件会从触发元素一直冒泡到其父元素，直到文档根元素为止。与之相对的是事件捕获，在事件冒泡之前，事件会从根元素向下依次捕获到触发该事件的元素。
如何实现事件冒泡和捕获？
在 JavaScript 中，事件冒泡和捕获可以通过事件监听器来实现。通过使用addEventListener()方法，可以为元素添加事件监听器，并指定事件的冒泡（false）或捕获（true）阶段。
例如，要在某个元素上实现事件冒泡，可以使用以下代码：
element.addEventListener('click', function(event) {
// 事件处理逻辑
}, false);
这样，当该元素被点击时，事件会从子元素冒泡到父元素，依次触发事件监听器。
如果要实现事件捕获，可以将第三个参数设置为true：
element.addEventListener('click', function(event) {
// 事件处理逻辑
}, true);
这样，事件会从根元素开始捕获，一直到触发该事件的元素。
事件冒泡和捕获有什么应用场景？
事件冒泡和捕获在前端开发中有着广泛的应用场景。比如，在页面中有多个嵌套的元素，你想要为每个元素添加点击事件，但又不希望为每个元素都编写相同的事件处理逻辑。这时，可以将事件监听器添加到父元素上，并通过事件冒泡或捕获来判断是哪个子元素被点击了，然后执行相应的逻辑。
另外，事件冒泡和捕获也可以用于事件委托。通过将事件监听器添加到父元素上，可以减少事件监听器的数量，提高性能。当子元素触发事件时，事件会冒泡到父元素，然后根据具体触发元素的属性或标签名，委托相应的处理逻辑。
总之，了解和掌握事件冒泡和捕获的原理和应用，对于前端开发是非常有帮助的。
