单击事件冒泡是什么？深入解析事件冒泡机制，需要具体代码示例
事件冒泡（Event Bubbling）是指在DOM树结构中，当一个元素触发了某个事件，该事件会沿着DOM树从子元素一直传递到根元素，这个过程就像气泡冒泡一样，因此称之为事件冒泡。
事件冒泡是DOM事件模型的一种机制，包括在HTML、XML和SVG等文档中。这种机制使得在父元素上注册的事件处理程序可以接收到由其子元素触发的事件。事件冒泡使得事件处理更加灵活和便捷。
为了更好地理解事件冒泡机制，我们来看一个具体的例子。假设我们有一个HTML页面，其中有一个div元素和一个嵌套在其中的button元素。我们在div元素上注册了一个单击事件的处理程序。当我们点击button时，div的单击事件处理程序也会被触发。
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var div = document.getElementById("myDiv");
var button = document.getElementById("myButton");
button.addEventListener("click", function(event){
alert("Button Clicked!");
event.stopPropagation(); // 阻止事件继续向上冒泡
});
div.addEventListener("click", function(){
alert("Div Clicked!");
});
};
</script>
</head>
<body>
<div id="myDiv">
<button id="myButton">Click Me</button>
</div>
</body>
</html>
腾讯云 12-20 广告
