js 事件传播机制

// HTML 结构
// <div id="parent">
//   <button id="child">Click me</button>
// </div>

const parent = document.getElementById('parent');
const child = document.getElementById('child');

// 冒泡阶段处理
child.addEventListener('click', function(event) {
  console.log('Child clicked - bubble');
});

parent.addEventListener('click', function(event) {
  console.log('Parent clicked - bubble');
});

// 捕获阶段处理
child.addEventListener('click', function(event) {
  console.log('Child clicked - capture');
}, true);

parent.addEventListener('click', function(event) {
  console.log('Parent clicked - capture');
}, true);

Parent clicked - capture
Child clicked - capture
Child clicked - bubble
Parent clicked - bubble