DOM的事件模型和DOM事件流

DOM的事件模型

DOM事件模型包括捕获和冒泡（ie用的是事件冒泡），捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到window。是两个过程。

003xds7Kzy7eaO08TL240&690.jpeg

DOM事件流

浏览器在为这个当前页面与用户做交互的过程中，比如我点击了这个鼠标左键，这个左键是怎么传到页面上。还有怎么响应的。事件流分三个阶段，第一阶段是捕获，第二阶段是目标阶段，比如点击的这个按钮，这个按钮就是目标阶段，事件通过捕获到达目标元素，就到达了目标阶段，第三个阶段是冒泡阶段，从目标元素再上传到window对象，就是冒泡的过程。

003xds7Kzy7eaO281y868&690.png

DOM事件捕获的具体流程

事件捕获是从上到下，具体第一个真正接收的是window（对象）——第二个接收的是document（对象）——第三个接收的是html标签（怎么获取html标签>document.documentElement）——第四个接收的是body（document.body）——......(父级--子级，剩下的就是按照普通的html结构一层一层往下传)——最后到达目标元素。

003xds7Kzy7eaOxQnnCc4&690.jpeg

DOM事件冒泡的具体流程

事件冒泡的具体流程（与事件捕获正好相反）：第一个接收的是目标元素——第二个接收的是...（子级--父级，按照html结构一层一层往上传）——然后接收的是body标签——html标签——document对象——最后一个接收的是window对象。

参考博客：https://www.cnblogs.com/diligenceday/p/4175721.html