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对象的冒泡阶段也添加了一个事件监听器，但它不会被触发。
