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()。
