请解释一下JavaScript事件冒泡机制 ？

JavaScript 的事件冒泡（Event Bubbling）是一种事件处理机制，它描述了当一个元素（例如一个按钮或一个链接）被触发时，如何在其祖先元素中传播这个事件。

在事件冒泡的过程中，当一个元素上的事件被触发时，该事件会首先在该元素上进行处理，然后逐级向上传播（或者说“冒泡”）到其父元素、父元素的父元素，以此类推，直到达到文档的根元素（通常是 document 对象）。在这个过程中，每个祖先元素都有机会处理这个事件。

这种机制的主要优点是，它允许我们在单个事件处理器中处理多个元素的事件，而无需为每个元素单独设置处理器。例如，如果你有一个嵌套的元素结构，并且你希望在某个内部元素被点击时执行一些操作，但你也想在外部元素被点击时执行一些不同的操作，你可以只在外部元素上设置一个事件处理器，然后在该处理器中检查事件的 target 属性来确定是哪个元素被点击了。

以下是一个简单的例子，展示了如何使用事件冒泡来在单个元素上处理多个子元素的事件：

<div id="parent">
  <button id="child1">Child 1</button>
  <button id="child2">Child 2</button>
</div>

<script>
  const parent = document.getElementById('parent');

  parent.addEventListener('click', function(event) {
    if (event.target === document.getElementById('child1')) {
      console.log('Child 1 was clicked.');
    } else if (event.target === document.getElementById('child2')) {
      console.log('Child 2 was clicked.');
    } else {
      console.log('Parent was clicked.');
    }
  });
</script>

在这个例子中，我们只在父元素 #parent 上设置了一个点击事件处理器。当点击任何一个子按钮时，事件会冒泡到父元素，然后我们的处理器会检查事件的 target 属性来确定是哪个元素被点击了，并据此输出不同的消息。