想要了解什么是事件捕获与冒泡，需要先了解什么是事件。
什么是事件？
我们知道，在前端开发中，JavaScript负责定义网页的“行为”。这里所说的“定义”，其实指的是开发者可以通过JavaScript语言向浏览器描述一些规则，浏览器按照这些规则与用户进行交互。比如开发者希望当用户点击页面上某个按钮的时候，就弹出一个窗口，显示特定的内容。而当用户真正点击这个按钮的时候，浏览器将按照开发者定义的这个规则，去弹出指定的窗口，显示指定的内容。
在上面的例子中，浏览器是一切规则的执行者，开发者是这些规则的制定者，而JavaScript只是开发者向浏览器描述这些规则时所使用的的语言（否则浏览器无法知道开发者想要在什么情况下做什么事）。假如我们通过以下的语句向浏览器描述了一条规则：
<body>
<button >点击</button>
<script>
var button = document.getElementById("btn"); //获取页面上的按钮
button.addEventListener("click", function(){ //定义点击事件
alert("我被点击了");
})
</script>
</body>
页面上现在有一个按钮，我们首先使用原生DOM获取这个按钮，然后使用button.addEventListener(“click”, function(){})这样的语法向浏览器描述了一条规则：当这个按钮被点击（click）时，弹出提示框，显示“我被点击了”。用户点击按钮后网页就会出现如下提示：
浏览器把这次“点击”称为一个“事件”。“事件”用于描述交互过程中某些特定的关键点（如点击、鼠标滑动、滚轮滚动、按下键盘、触屏操作等，每个操作都对应特定的事件，不过事件也可能与用户行为无关，比如网页加载完毕也是一个事件）。而浏览器处理交互最重要的手段就是基于事件来执行开发者定义好的回调函数（如在用户“点击按钮”时“弹出窗口”，而定义“弹出窗口”行为的就是回调函数，也就是addEventListener中的function）。
定义完这条规则，当用户点击按钮时，浏览器就会弹出上述窗口了。我们称“点击”这个事件是在这个按钮上触发的（因为我们的回调函数是绑定在这个按钮上的）。
那什么是事件的捕获与冒泡呢？
事件的捕获与冒泡
这个问题与HTML的结构息息相关。
在前端开发中，我们使用标签语言HTML来描述网页结构，如一个标题、一个段落、一个表格等，这些网页元素描述了网页上有哪些需要显示的内容，它们构成了整个网页的“骨骼”，通常是一种嵌套的结构，比如：
<html> <head> ... //这是对网页内容的元描述 </head> <body> //这是网页需要渲染的真正内容 <div> <h1>标题</h1> <p>这里是一个段落</p> </div> </body> </html>
上述网页结构示意图如下（在没有设置padding等属性的情况下，子元素通常会填满父元素，这里的内间距只是为了说明元素的嵌套关系）：
我们看到，body元素是整个网页的容器，它的内部包含了一个div元素，而div的内部又包含了两个元素：h1和p。假如我们现在在p的内部点击了一下，那么请问我们有没有点击它的外部容器div，以及最外部的body呢？
从浏览器的角度来看，我们同时在点击这三个元素。
想要证明这个结论非常简单，只需要使用addEventListener向div和body各自绑定click事件，如果点击p时也会被触发，那就说明上面的结论是正确的。毫无疑问，它们会被触发。
