事件流
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事件");
});
