本文介绍JavaScript中DOM事件默认冒泡机制，并通过示例演示如何使用stopPropagation()函数在按钮点击事件中阻止事件向父级body传播，从而避免多重响应。
JavaScript事件冒泡与阻止传播示例
在JavaScript中，DOM事件默认遵循冒泡机制，即事件会逐层向上传播至父节点。开发者可以使用stopPropagation()函数来终止这一传播过程。以下通过具体示例进行说明：
HTML代码结构如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>stopPropagation()使用 - 琼台博客</title>
</head>
<body>
<button>button</button>
</body>
</html>
[/code]
没有加stopPropagation()
[code]
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
alert('button click');
};
document.body.onclick=function(event){
alert('body click');
}
由于事件会逐层向上传播，当用户单击button按钮时，该点击事件会进一步传播到body层级，从而触发body上的click事件处理程序。最终结果是弹出两个警告框，分别显示button和body的点击信息。
引入stopPropagation()后的效果：
var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
alert('button click');
// 停止DOM事件层次传播
event.stopPropagation();
};
document.body.onclick=function(event){
alert('body click');
}
在button的单击事件处理函数中调用stopPropagation()以停止事件传播。此时，在弹出来自button单击事件的警告框后，事件不再向body层传播，因此不会再次触发body的警告框。最终结果仅弹出一个警告框。
许多开发者在编写JavaScript代码时，容易忽视DOM事件逐层向上冒泡的特性，这可能导致程序出现意外异常。若需深入了解相关机制，建议查阅关于JavaScript事件冒泡的详细资料。