一 事件流
定义:事件流描述了页面接收事件的顺序
全文示例
<!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> 元素上触发事件的“到达目标” 阶段,通常在事件处理时被认为是冒泡阶段的一部分(稍后讨论)
然后,冒泡阶段开始,事件反向传播至文档