js实现点击冒泡

事件冒泡的基本概念

事件冒泡是DOM事件传播的一种机制，当某个元素触发事件时，事件会从触发元素开始向上层父元素逐级传播，直到document对象。例如，点击子元素时，父元素上的点击事件也会被触发。

阻止事件冒泡的方法

使用event.stopPropagation()可以阻止事件继续向上冒泡。以下是一个典型示例：

document.getElementById('child').addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止冒泡
  console.log('子元素被点击，但事件不会冒泡到父元素');
});

document.getElementById('parent').addEventListener('click', function() {
  console.log('父元素被点击'); // 不会执行
});

默认行为与冒泡的关系

某些事件（如<a>标签的点击）会触发默认行为（如跳转链接）。如果需要同时阻止默认行为和冒泡，可以使用event.preventDefault()和event.stopPropagation()：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();  // 阻止默认跳转
  event.stopPropagation(); // 阻止冒泡
  console.log('链接点击被拦截');
});

事件委托与冒泡的利用

事件冒泡可以用于实现事件委托，即在父元素上监听子元素的事件。通过event.target判断实际触发事件的元素：

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    console.log('子元素被点击，通过事件委托处理');
  }
});

兼容性注意事项

在旧版IE浏览器中，需使用event.cancelBubble = true代替stopPropagation()：

document.getElementById('child').attachEvent('onclick', function(event) {
  event = event || window.event;
  event.cancelBubble = true; // IE兼容写法
});

总结

• 冒泡是事件从子元素向父元素传播的自然行为。
• stopPropagation()用于阻止冒泡，preventDefault()用于阻止默认行为。
• 事件委托通过冒泡机制优化性能，减少事件监听器数量。
• 旧版IE需使用cancelBubble替代stopPropagation()。