一、事件冒泡
在事件冒泡模式中，事件首先在目标元素上触发，然后逐级向上传播到包含该元素的父级元素，直到到达最外层的祖先元素。在事件冒泡过程中，每个包容元素的处理函数都会执行，如果有多个相同类型的事件处理函数，它们会按照绑定的先后顺序依次执行。
以下是一个简单的示例：
<div id="outer">
<div id="inner">Click me!</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function(event) {
console.log('Clicked on outer element');
});
inner.addEventListener('click', function(event) {
console.log('Clicked on inner element');
});
</script>在上述代码中，当点击 inner 元素时，事件会首先在 inner 元素上触发，然后冒泡到 outer 元素，最终到达文档的根元素。
二、事件捕获
在事件捕获模式中，事件从最外层的祖先元素开始逐级向下传播，直到到达目标元素。在事件捕获过程中，每个包容元素的处理函数都会执行，如果有多个相同类型的事件处理函数，它们会按照绑定的先后顺序依次执行。
以下是一个简单的示例：
<div id="outer">
<div id="inner">Click me!</div>
</div>
<script>
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click', function(event) {
console.log('Clicked on outer element (capture)');
}, true);
inner.addEventListener('click', function(event) {
console.log('Clicked on inner element (capture)');
}, true);
</script>在上述代码中，当点击 inner 元素时，事件从 outer 元素开始向下传播，在捕获阶段依次触发 outer 和 inner 元素的事件处理函数，最终到达目标元素 inner。
三、事件传播的应用
在实际开发中，我们可以利用事件冒泡和捕获的特性来实现一些常见的任务。
例如，在使用表格布局时，我们可能需要根据用户的操作来调整表格列宽。可以通过在表格父元素上绑定 mousemove 事件来实现：
<table>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content 1-1</td>
<td>Content 1-2</td>
<td>Content 1-3</td>
</tr>
<tr>
<td>Content 2-1</td>
<td>Content 2-2</td>
<td>Content 2-3</td>
</tr>
</tbody>
</table>
<script>
var table = document.querySelector('table');
var resizing = false;
var column = null;
var startX = null;
table.addEventListener('mousedown', function(event) {
if (event.target.tagName === 'TH') {
resizing = true;
column = event.target;
startX = event.pageX;
}
}, true);
table.addEventListener('mousemove', function(event) {
if (resizing) {
var deltaX = event.pageX - startX;
var width = parseInt(column.style.width || column.clientWidth);
column.style.width = (width + deltaX) + 'px';
startX = event.pageX;
}
}, true);
table.addEventListener('mouseup
