JavaScript 事件冒泡机制详解及应用 - 从基础到进阶

JavaScript 事件冒泡是指当一个元素触发了某个事件，该事件将逐层向上冒泡到父元素，直到冒泡到文档根节点。

事件冒泡的过程可以用以下示例来说明：

<div id='parent'>
  <div id='child'>
    <button id='button'>点击按钮</button>
  </div>
</div>

document.getElementById('button').addEventListener('click', function(event) {
  console.log('按钮被点击了');
  event.stopPropagation(); // 阻止事件继续冒泡
});

document.getElementById('child').addEventListener('click', function() {
  console.log('子元素被点击了');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素被点击了');
});

如果我们点击按钮，控制台将输出：

按钮被点击了
子元素被点击了
父元素被点击了

事件从按钮开始冒泡到子元素，然后再冒泡到父元素。

如果在按钮的事件处理函数中调用了event.stopPropagation()方法，那么事件将停止冒泡，不再传递给父元素，控制台将只输出：

按钮被点击了

事件冒泡在开发中非常有用，可以方便地实现事件委托、事件代理等功能。