一 事件流
定义：事件流描述了页面接收事件的顺序
全文示例
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="myDiv">Click Me</div>
</body>
</html> 二 事件冒泡
定义：事件被定义为从最具体的元素（文档树中最深的节点）开始触 发，然后向上传播至没有那么具体的元素（文档）
点击事件顺序发生：
(1) <div>
(2) <body>
(3) <html>
(4) document
触发描述：
<div>元素，即被点击的元素，最先触发 click 事件。然后，click 事件沿 DOM 树一 路向上，在经过的每个节点上依次触发，直至到达 document 对象
三 事件捕获
定义：事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达最终目标前拦截事件
所有浏览器捕获事件
- DOM 都是从 window 对象开始，
- DOM2 Events规范规定的是从 document 开始
点击事件顺序发生：
(1) document
(2) <html>
(3) <body>
(4) <div>
触发描述：
在事件捕获中，click 事件首先由 document 元素捕获，然后沿 DOM 树依次向下传播，直至到达实际的目标元素
四 DOM事件流
定义：DOM2 Events 规范规定事件流分为 3 个阶段：事件捕获、到达目标和事件冒泡。
- 事件捕获最先发生， 为提前拦截事件提供了可能。
- 然后，实际的目标元素接收到事件。
- 最后一个阶段是冒泡，最迟要在这个阶段响应事件。
触发描述：
在 DOM 事件流中，实际的目标（<div>元素）在捕获阶段不会接收到事件。
这是因为捕获阶段从 document 到 <html> 再到 <body> 就结束了。
下一阶段，即会在 <div> 元素上触发事件的“到达目标” 阶段，通常在事件处理时被认为是冒泡阶段的一部分（稍后讨论）
然后，冒泡阶段开始，事件反向传播至文档
标签：DOM,捕获,元素,冒泡,document,事件 来源： https://blog.csdn.net/xiaoyangzhu/article/details/121910596
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。