Open jtwang7 opened 3 years ago
概念：事件触发时，从最具体的触发元素(文档树中最深的节点)开始触发，然后向上传播至没有那么具体的元素。
最具体的元素：文档树中触发本次事件的最深节点 没那么具体的元素：文档树中的顶层对象 - document 对象，在现代浏览器中，事件会一直冒泡到 window 对象
触发流程：target element => ... => body => html => document => window
target element => ... => body => html => document => window
概念：事件触发时，从最不具体的节点收到事件，然后向下传播至最具体的触发元素。 触发流程：window => document => html => body => ... => target element
window => document => html => body => ... => target element
现代浏览器都是从 window 对象开始捕获事件的，而 DOM2 Events 规范规定的是从 document 开始。
事件流描述了页面接收到事件的顺序，DOM2 Events 规范规定事件流分为 3 个阶段：
在 DOM 事件流中，实际触发事件的目标元素在捕获阶段不会接收到事件。这是因为规范规定事件捕获阶段从 document 传播到 body 就结束了，后续事件处理阶段在到达目标和事件冒泡阶段执行。通常事件处理被认为是冒泡阶段的一部分。
虽然 DOM2 Events 规范明确捕获阶段不会命中事件目标，但现代浏览器都会在捕获阶段在事件目标上触发事件，这也就意味着在事件目标上有两次机会执行事件处理程序。
尽管现代浏览器中实现了捕获阶段执行事件处理程序，但我们仍要尽量遵循在事件捕获阶段仅执行事件拦截的逻辑，将事件响应放在到达目标和事件冒泡阶段执行。
事件冒泡
概念：事件触发时，从最具体的触发元素(文档树中最深的节点)开始触发，然后向上传播至没有那么具体的元素。
触发流程：
target element => ... => body => html => document => window事件捕获
概念：事件触发时，从最不具体的节点收到事件，然后向下传播至最具体的触发元素。 触发流程：
window => document => html => body => ... => target elementDOM 事件流
事件流描述了页面接收到事件的顺序，DOM2 Events 规范规定事件流分为 3 个阶段：
在 DOM 事件流中，实际触发事件的目标元素在捕获阶段不会接收到事件。这是因为规范规定事件捕获阶段从 document 传播到 body 就结束了，后续事件处理阶段在到达目标和事件冒泡阶段执行。通常事件处理被认为是冒泡阶段的一部分。
尽管现代浏览器中实现了捕获阶段执行事件处理程序，但我们仍要尽量遵循在事件捕获阶段仅执行事件拦截的逻辑，将事件响应放在到达目标和事件冒泡阶段执行。