JavaScript 中的冒泡机制是指当一个元素触发了某个事件后，该事件将会一层层地向上传递至父级元素，直至到达文档的根节点

比如说，在一个嵌套的列表中，如果你点击了其中一个子元素，该点击事件将会传递给父元素，然后再传递给上一级父元素，直至传递到文档的根节点

<ul id="grandparent"><li id="parent"><a href="">Parent</a><ul id="child"><li>Child 1</li><li>Child 2</li></ul></li></ul><script>document.querySelector('#child').addEventListener('click', function(event) {console.log(event.target.tagName); //返回li});</script>

在上述代码中，当用户点击 #child 列表中的下一个元素时，该事件将会向上传递到 #parent，再传递到 #grandparent，最后到达文档的根节点

如果希望阻止事件冒泡，可以使用 event.stopPropagation() 方法，来阻止事件向上传递

<ul id="grandparent"><li id="parent"><a href="">Parent</a><ul id="child"><li>Child 1</li><li>Child 2</li></ul></li></ul><script>document.querySelector('#child').addEventListener('click', function(event) {event.stopPropagation(); //阻止事件冒泡console.log(event.target.tagName); //返回li});document.querySelector('#parent').addEventListener('click', function(event) {console.log(event.target.tagName); //返回a});document.querySelector('#grandparent').addEventListener('click', function(event) {console.log(event.target.tagName); //返回a});</script>

在上述代码中，当用户点击 #child 列表中的下一个元素时，通过调用 event.stopPropagation() 方法，可以阻止事件向上传递到 #parent 和 #grandparent 两个元素。

总的来说，冒泡机制是一种非常实用的、常用的机制，它可以帮助开发人员管理复杂的文档结构，在构建具有高互动性的现代 Web 应用程序时，它们可以提供强大而灵活的基础。