addEventListener方法

最新推荐文章于 2022-10-26 23:03:55 发布

sunnana

最新推荐文章于 2022-10-26 23:03:55 发布

阅读量221

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： JavaScript ViewUI

本文链接：https://blog.youkuaiyun.com/sunnana/article/details/84691002

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了JavaScript事件流的三个阶段：捕获阶段、目标阶段和冒泡阶段，并通过实例展示了不同参数设置下事件触发的顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.时间流分为三个阶段：由根往目标的捕获阶段、目标阶段、由目标到根的冒泡阶段。

2.addEventListener(type, listener, boolean)
捕获阶段：boolean是true并注册了事件的元素
目标阶段：目标元素
冒泡阶段：boolean是false并注册了事件的元素


<div id="outDiv">
    <div id="middleDiv">
      <div id="inDiv"></div>
    </div>
  </div>
</div>
<script>
var outDiv = document.getElementById("outDiv");
var middleDiv = document.getElementById("middleDiv");
var inDiv = document.getElementById("inDiv");
var info = document.getElementById("info");
outDiv.addEventListener("click", function () { info.innerHTML += "outDiv" + "<br>"; }, flag);
middleDiv.addEventListener("click", function () { info.innerHTML += "middleDiv" + "<br>"; }, flag);
inDiv.addEventListener("click", function () { info.innerHTML += "inDiv" + "<br>"; }, flag);
</script>

 全为 false 时，触发顺序为：inDiv、middleDiv、outDiv;
 全为 true 时，触发顺序为：outDiv、middleDiv、inDiv;
 outDiv 为 true，其他为 false 时，触发顺序为：outDiv、inDiv、middleDiv;
 middleDiv 为 true，其他为 false 时，触发顺序为：middleDiv、inDiv、outDiv;
 inDiv 为 true，其他为 false 时，触发顺序为：inDiv、middleDiv、outDiv;
 outDiv为 false，其他为 true时，触发顺序为：middleDiv、inDiv、outDiv;
 middleDiv为 false，其他为 true时，触发顺序为：outDiv、inDiv、middleDiv;
 inDiv为 false，其他为 true时，触发顺序为：outDiv、middleDiv、inDiv.