当前位置：首页 > news >正文

js 事件流、事件冒泡、事件捕获、阻止事件的传播

news 2025/7/7 23:28:22

事件流

js 事件的执行过程分为捕获阶段（由外层节点传播到内层节点）和冒泡阶段（由内层节点传播到外层节点），即先执行捕获阶段的代码，后执行冒泡阶段的代码

事件冒泡

js 事件中的代码默认在冒泡阶段执行，以下图为例，点击box2时，会依次触发box2的点击事件【冒泡阶段执行】、box1的点击事件【冒泡阶段执行】、window的点击事件【冒泡阶段执行】。
在这里插入图片描述

  window.addEventListener("click", function (e) {if (e.target.id === "box2") {console.log("点击box2触发window的click事件");} else if (e.target.id === "box1") {console.log("点击box1触发window的click事件");} else {console.log("触发了window的click事件");}});document.getElementById("box1").addEventListener("click", function (e) {console.log("触发了box1的click事件");});document.getElementById("box2").addEventListener("click", function (e) {console.log("触发了box2的click事件");});

在这里插入图片描述

事件捕获

给 addEventListener 函数的第三个参数传入 true ，便会将事件中的代码改为在捕获阶段执行，此时点击box2时，会依次触发window的点击事件【捕获阶段执行】，box2的点击事件【冒泡阶段执行】，box1的点击事件【冒泡阶段执行】。

  window.addEventListener("click",function (e) {if (e.target.id === "box2") {console.log("点击box2触发window的click事件");} else if (e.target.id === "box1") {console.log("点击box1触发window的click事件");} else {console.log("触发了window的click事件");}},//改为在捕获阶段执行true);document.getElementById("box1").addEventListener("click", function (e) {console.log("触发了box1的click事件");});document.getElementById("box2").addEventListener("click", function (e) {console.log("触发了box2的click事件");});

在这里插入图片描述

阻止事件的传播

使用

e.stopPropagation()

范例：点击box2时，只触发box2的点击事件，不触发box1和window的点击事件

  window.addEventListener("click", function (e) {if (e.target.id === "box2") {console.log("点击box2触发window的click事件");} else if (e.target.id === "box1") {console.log("点击box1触发window的click事件");} else {console.log("触发了window的click事件");}});document.getElementById("box1").addEventListener("click", function (e) {console.log("触发了box1的click事件");});document.getElementById("box2").addEventListener("click", function (e) {console.log("触发了box2的click事件");// 阻止事件继续传播e.stopPropagation();});

实战范例

需求：

点击box2时，只执行window点击事件中通过点击box2触发window点击事件的代码，不执行box1的点击事件代码
点击box1时，只执行box1的点击事件代码，不执行window点击事件中通过点击box1触发window点击事件的代码

  window.addEventListener("click",function (e) {if (e.target.id === "box2") {console.log("点击box2触发window的click事件");// 阻止事件继续传播e.stopPropagation();} else if (e.target.id === "box1") {return;console.log("点击box1触发window的click事件");} else {console.log("触发了window的click事件");}},true);document.getElementById("box1").addEventListener("click", function (e) {console.log("触发了box1的click事件");});document.getElementById("box2").addEventListener("click", function (e) {console.log("触发了box2的click事件");});