定义
当一个元素上的事件被触发时，该事件会首先在当前元素上执行，然后依次向上传播到父元素，直到到达文档的根节点。这个过程就像气泡从水底向上冒一样，所以被称为事件冒泡。
示例
html
<!DOCTYPE html>
<html>
<body>
<div id="parent" style="background-color: lightblue; padding: 20px;">
<div id="child" style="background-color: lightgreen; padding: 10px;">
<button id="button">点击我</button>
</div>
</div>
<script>
document.getElementById('button').addEventListener('click', function () {
console.log('按钮被点击了');
});
document.getElementById('child').addEventListener('click', function () {
console.log('子元素被点击了');
});
document.getElementById('parent').addEventListener('click', function () {
console.log('父元素被点击了');
});
</script>
</body>
</html>
在上述代码中，当点击按钮时，会依次输出"按钮被点击了" "子元素被点击了" "父元素被点击了"，这就是事件冒泡的体现。
应用场景
- **事件委托**：利用事件冒泡，可以将多个子元素的事件委托给父元素来处理。这样可以减少事件处理程序的数量，提高性能。例如，在一个列表中，每个列表项都有一个点击事件，如果为每个列表项都添加一个事件处理程序，会占用较多的内存。可以将点击事件添加到列表的父元素上，通过事件冒泡来处理所有列表项的点击事件。
- **全局事件监听**：在某些情况下，可能需要在整个页面上监听某个事件，例如鼠标点击事件。可以在文档的根节点上添加一个事件处理程序，通过事件冒泡，当页面上任何一个元素发生点击事件时，都会触发这个全局的事件处理程序。
阻止事件冒泡
在某些情况下，可能需要阻止事件冒泡，例如当点击一个弹出框的关闭按钮时，不希望点击事件传播到父元素，从而避免触发父元素的其他事件。可以使用`event.stopPropagation()`方法来阻止事件冒泡。如下面的代码：
html
<!DOCTYPE html>
<html>
<body>
<div id="parent" style="background-color: lightblue; padding: 20px;">
<div id="child" style="background-color: lightgreen; padding: 10px;">
<button id="button">点击我</button>
</div>
</div>
<script>
document.getElementById('button').addEventListener('click', function (event) {
event.stopPropagation();
console.log('按钮被点击了');
});
document.getElementById('child').addEventListener('click', function () {
console.log('子元素被点击了');
});
document.getElementById('parent').addEventListener('click', function () {
console.log('父元素被点击了');
});
</script>
</body>
</html>
在这个例子中，当点击按钮时，只会输出"按钮被点击了"，因为`event.stopPropagation()`阻止了事件冒泡到父元素。