JavaScript与HTML之间的交互是通过事件实现的，而用户与浏览器页面的互动也是通过事件来实现的事件就是文档或浏览器窗口中发生的一些特定的交互瞬间，所以分为两种事件，一是发生在 浏览器对象（BOM）上的事件，一是发生在 文档对象（DOM）上的事件。
浏览器规定了两种事件流模型： 捕获型事件流 和 冒泡型事件流 。
页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流。
在实际中，事件流包括了三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段，当点击一个div元素时，以下就是事件流的顺序：
1. 顶级对象（window）接收到click事件，然后逐级向下捕获
2. 目标元素（div）接收到到事件
3. 对事件做出响应，逐级向上冒泡到顶级对象。
1. 顶级对象（window）接收到click事件，然后逐级向下捕获
2. 目标元素（div）接收到到事件
3. 对事件做出响应，逐级向上冒泡到顶级对象。
事件冒泡是目标元素接受事件，然后逐级向上传播到顶级元素为止。
<!DOCTYPE html>
<html>
<head></head>
<body><div>click me</div>
</body>
</html>点击div元素，click事件会沿着DOM树向上传播，在每一级节点都会发生，冒泡顺序为：div -> body -> html -> document。
事件捕获与事件冒泡是相反的，是顶级元素先接收到事件，再逐级向下传播到目标元素为止
同样是以上示例，document对象会先接收到click事件，然后沿着DOM树向下传播到事件的目标元素，捕获顺序为：document -> html -> body -> div，浏览器都是从window对象开始捕获的。
![2024.4.5-[作业记录]-day10-CSS 布局模型（层模型）](http://pic.xiahunao.cn/2024.4.5-[作业记录]-day10-CSS 布局模型（层模型）)
