JavaScript的事件流主要包括三个阶段：捕获阶段、目标阶段和冒泡阶段。当一个事件发生时，如点击一个按钮，这个事件会从最外层的祖先元素（通常是window对象）开始向下传递，这是捕获阶段。当事件到达触发事件的目标元素时，进入目标阶段。然后，事件会从目标元素开始，向上冒泡到最外层的祖先元素，这是冒泡阶段。
下面是一个演示JavaScript事件流的简单实例：
html<!DOCTYPE html>
<html>
<head>
<title>JavaScript 事件流示例</title>
<style>
#outer {
width: 300px;
height: 300px;
background-color: lightblue;
}
#middle {
width: 200px;
height: 200px;
background-color: lightgreen;
margin: 50px;
}
#inner {
width: 100px;
height: 100px;
background-color: lightyellow;
margin: 50px;
}
</style>
</head>
<body>
<div id="outer">
<div id="middle">
<div id="inner">点击我</div>
</div>
</div>
<script>
var outerDiv = document.getElementById('outer');
var middleDiv = document.getElementById('middle');
var innerDiv = document.getElementById('inner');
// 在捕获阶段添加事件监听器
document.addEventListener('click', function(event) {
event.stopPropagation(); // 阻止事件冒泡
console.log('捕获阶段：document');
}, true); // 第三个参数为true表示在捕获阶段添加事件监听器
outerDiv.addEventListener('click', function(event) {
console.log('捕获阶段：outerDiv');
}, true);
middleDiv.addEventListener('click', function(event) {
console.log('捕获阶段：middleDiv');
}, true);
innerDiv.addEventListener('click', function(event) {
console.log('目标阶段：innerDiv');
});
middleDiv.addEventListener('click', function(event) {
console.log('冒泡阶段：middleDiv');
});
outerDiv.addEventListener('click', function(event) {
console.log('冒泡阶段：outerDiv');
});
document.addEventListener('click', function(event) {
console.log('冒泡阶段：document');
});
</script>
</body>
</html>这个示例中，有三个嵌套的div元素，分别命名为outerDiv、middleDiv和innerDiv。我们在这些元素以及document对象上添加了点击事件的监听器，并指定了事件是在捕获阶段还是冒泡阶段触发。当你点击"点击我"这个文本时，控制台将输出事件流的顺序。
注意，在document对象的捕获阶段事件监听器中，我们调用了event.stopPropagation()方法来阻止事件冒泡。因此，尽管我们在document对象的冒泡阶段也添加了一个事件监听器，但它不会被触发。