以下是一个简单的例子，演示了事件冒泡和事件捕获的过程
<!DOCTYPE html> <html> <head> <title>事件冒泡和事件捕获</title> </head> <body> <div id="outer"> <p id="inner">点击我</p> </div> <script> var outer = document.getElementById("outer"); var inner = document.getElementById("inner"); outer.addEventListener("click", function(){ console.log("outer捕获"); }, true); inner.addEventListener("click", function(){ console.log("inner目标"); }); outer.addEventListener("click", function(){ console.log("outer冒泡"); }); </script> </body> </html>
JS中的事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。事件捕获是从外向内依次触发，而事件冒泡则是从内向外依次触发。在使用addEventListener方法添加事件监听时，第三个参数用来控制是冒泡事件还是捕获事件（false为冒泡，true为捕获，默认值为false）。
举个例子，当一个按钮被点击时，事件会首先在最外层的元素上进行捕获，然后逐级向下，直到到达目标元素，接着在目标元素上进行处理，最后再从目标元素开始向上冒泡，直到到达最外层的元素。
当我们点击后会出现相应的内容
outer捕获 inner目标 outer冒泡
