事件冒泡和事件捕获是指在HTML DOM中处理事件时，事件传播的两种不同方式。详细介绍：1、事件冒泡是指当一个元素触发了某个事件，该事件将从最内层的元素开始传播到最外层的元素。也就是说，事件首先在触发元素上触发，然后逐级向上冒泡，直到达到根元素；2、事件捕获则是相反的过程，事件从根元素开始，逐级向下捕获，直到达到触发事件的元素。
本教程操作系统：windows10系统、Dell G3电脑。
事件冒泡和事件捕获是指在HTML DOM中处理事件时，事件传播的两种不同方式。
事件冒泡（Event Bubbling）是指当一个元素触发了某个事件，该事件将从最内层的元素开始传播到最外层的元素。也就是说，事件首先在触发元素上触发，然后逐级向上冒泡，直到达到根元素。
事件捕获（Event Capturing）则是相反的过程，事件从根元素开始，逐级向下捕获，直到达到触发事件的元素。
在HTML DOM中，默认情况下，事件会按照事件冒泡的方式进行传播。也就是说，事件首先在触发元素上触发，然后逐级向上冒泡，直到达到根元素。
可以通过addEventListener方法来明确指定事件的传播方式。addEventListener方法可以接受三个参数，分别是要监听的事件类型、事件处理函数以及一个布尔值，用于指定事件的传播方式。当传入的布尔值为true时，表示使用事件捕获；当传入的布尔值为false或省略时，表示使用事件冒泡。
例如，以下代码演示了事件捕获和事件冒泡的区别：
<div>
<div>
<button>点击</button>
</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');
outer.addEventListener('click', function() {
console.log('事件冒泡 - 外层元素');
}, false);
inner.addEventListener('click', function() {
console.log('事件冒泡 - 内层元素');
}, false);
button.addEventListener('click', function() {
console.log('事件冒泡 - 按钮');
}, false);
outer.addEventListener('click', function() {
console.log('事件捕获 - 外层元素');
}, true);
inner.addEventListener('click', function() {
console.log('事件捕获 - 内层元素');
}, true);
button.addEventListener('click', function() {
console.log('事件捕获 - 按钮');
}, true);
</script>
运行上述代码后，当点击按钮时，会依次触发事件捕获阶段和事件冒泡阶段的事件处理函数，并在控制台输出相应的信息。
