DOM事件流

最新推荐文章于 2022-05-20 11:07:29 发布

文燚

最新推荐文章于 2022-05-20 11:07:29 发布

阅读量221

点赞数

分类专栏： DOM 文章标签： DOM DOM事件

本文链接：https://blog.csdn.net/yshenhua/article/details/79735872

版权

DOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

DOM（Document Object Model——文档对象模型）是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。当一个页面元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

一个完整的事件流分为三个阶段：

1) 捕获阶段

2) 目标阶段

3) 冒泡阶段

捕获阶段事件从根节点自上而下向目标节点传播，具体流程：目标元素产生事件→ window对象接收到该事件 → document对象接收到该事件 → html元素接收到该事件→ body元素接收到该事件→ …… → 目标元素接收到该事件。

冒泡阶段与捕获阶段正好相反，事件在节点树中自下而上传播。由于老版本的浏览器不太支持事件捕获，事件传播默认为冒泡（addEventListener的第三个参数默认为false）。

代码示例：

<body>
  <div id="ev">目标元素</div>
<script>
  window.addEventListener("click", function(){
    console.log("window captrue")
  }, true);

  document.addEventListener("click", function(){
    console.log("document captrue")
  }, true);

  document.documentElement.addEventListener("click", function(){
    console.log("html captrue")
  }, true);

  document.body.addEventListener("click", function(){
    console.log("body captrue")
  }, true);
  
  document.getElementById("ev").addEventListener("click", function(){
    console.log("ev captrue")
  }, true);
</script>
</body>

输出结果：

文燚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM事件流

DOM（Document Object Model——文档对象模型）是载入到浏览器中的文档模型，它用节点树的形式来表现文档，每个节点代表文档的构成部分（例如： element——页面元素、字符串或注释等等）。当一个页面元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。一个完整的事件流分为三个阶段： 1) 捕获阶段 ...
复制链接

扫一扫