JavaScript 冒泡点击事件详解：原理、代码示例及阻止事件冒泡

在 JavaScript 中，可以使用事件监听器来监听并处理点击事件。冒泡点击事件是指当某个元素被点击时，其点击事件会向上级元素传递，直到根元素为止。

下面是一个示例代码，演示了如何使用冒泡点击事件：

// 获取要监听点击事件的元素
var parentElement = document.getElementById('parent');
var childElement = document.getElementById('child');

// 添加点击事件监听器
parentElement.addEventListener('click', function(event) {
  console.log('点击了父元素');
});

childElement.addEventListener('click', function(event) {
  console.log('点击了子元素');
  // 阻止事件冒泡
  event.stopPropagation();
});

在上面的代码中，parentElement是父元素，childElement是子元素。当点击子元素时，首先会触发子元素的点击事件处理函数，然后会触发父元素的点击事件处理函数。如果在子元素的点击事件处理函数中调用event.stopPropagation()方法，可以阻止事件继续向上级元素传递，即阻止事件冒泡。

注意，上面的代码中使用了addEventListener()方法来添加事件监听器。这是一种常见的方式，可以监听多个相同类型的事件。如果只需要监听一个点击事件，也可以直接给元素赋值一个点击事件处理函数，例如：

parentElement.onclick = function(event) {
  console.log('点击了父元素');
};

childElement.onclick = function(event) {
  console.log('点击了子元素');
  event.stopPropagation();
};

这样，点击事件就会触发相应的处理函数。