事件冒泡

事件冒泡是指在 HTML 文档中，当一个元素上触发了某个事件（比如点击事件），该事件会从最深层的节点开始向最外层的祖先节点传播的过程。换句话说，事件会从触发事件的元素开始，沿着 DOM 树向上逐层传播，直到根节点为止。

冒泡过程

事件冒泡的过程可以分为以下几个阶段：

捕获阶段（Capture Phase）：事件从根节点一直传播到触发事件的目标元素。
目标阶段（Target Phase）：事件达到目标元素，执行目标元素上绑定的事件处理函数。
冒泡阶段（Bubbling Phase）：事件从目标元素开始，沿着 DOM 树向上冒泡，依次执行每个祖先元素上绑定的事件处理函数，直到根节点为止。

通过事件冒泡机制，我们可以在父元素上绑定一个事件处理程序，而不必在每个子元素上都绑定相同的事件处理程序。当子元素触发事件时，事件会一直冒泡到父元素，从而实现对整个元素树的统一管理。

在 JavaScript 中，可以利用事件冒泡机制来实现事件委托（Event Delegation），即在父元素上监听事件，通过判断事件目标来执行相应的操作。这种方式可以减少事件处理程序的数量，提高性能，并且方便动态添加或移除子元素时的事件处理。

事件冒泡

// 事件冒泡：多个元素嵌套，有层次关系，这些元素都注册了相同的事件，如果里面的元素的事件被触发了，那么外面的元素的该事件，会自动的触发了，这个就叫事件冒泡。
// 如下就是嵌套的元素，如果给这三个 div 都注册了点击事件，此时点击最里面的 div，就会触发外围两个 div 的点击事件
<div id="div1">
	<div id="div2">
		<div id="div3">
		</div>
	</div>
</div>
// 注册事件
document.getElementById("div1").onclick = function(){
	console.log("this.id");
}
document.getElementById("div2").onclick = function(){
	console.log("this.id");
}
document.getElementById("div3").onclick = function(){
	console.log("this.id");
}

阻止事件冒泡

// 方法一：window.event.cancelBubble = true;
// 缺点：IE8、谷歌都支持，但火狐不支持
// 注册事件
document.getElementById("div1").onclick = function(){
	console.log(this.id);
}
document.getElementById("div2").onclick = function(){
	console.log(this.id);
}
document.getElementById("div3").onclick = function(){
	console.log(this.id);
	// 加了这行后，IE8 和谷歌里，点击 div3，就不会触发 div1 和 div2 的点击事件了
	window.event.cancelBubble=true
}

// 方法二：e.stopPropagation();
// 缺点：谷歌和火狐都支持，IE8 不支持
//注册事件
document.getElementById("div1").onclick = function(){
	console.log(this.id);
}
document.getElementById("div2").onclick = function(){
	console.log(this.id);
}
document.getElementById("div3").onclick = function(e){
	console.log(this.id);
	// 加了这行后，谷歌和火狐里，点击 div3，就不会触发 div1 和 div2 的点击事件了
	e.stopPropagation();
}

// window.event 和 e 都是事件参数对象，一个是 IE 的标准，一个是火狐的标准

Bjb Code

事件冒泡

冒泡过程

事件冒泡

阻止事件冒泡