JavaScript事件流详解：捕获、冒泡与事件委托实战

<div id="outer">
  <div id="inner">点击我</div>
</div>

<script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');
  
  // 捕获阶段（第三个参数为true）
  outer.addEventListener('click', function() {
    console.log('捕获阶段：外部元素');
  }, true);
  
  // 冒泡阶段（第三个参数为false或省略）
  outer.addEventListener('click', function() {
    console.log('冒泡阶段：外部元素');
  }, false);
  
  inner.addEventListener('click', function() {
    console.log('目标元素');
  });
</script>

// 为每个列表项添加点击事件
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function() {
    console.log('点击了项目:', this.textContent);
  });
});

// 动态添加新项目时，新项目没有事件处理
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
document.querySelector('.list').appendChild(newItem);
// 新项目没有点击事件！

// 将事件处理委托给父元素
document.querySelector('.list').addEventListener('click', function(e) {
  if (e.target.classList.contains('item')) {
    console.log('点击了项目:', e.target.textContent);
  }
});

// 现在动态添加的项目也会自动拥有点击事件
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新项目';
document.querySelector('.list').appendChild(newItem);
// 新项目也有点击事件！

// 阻止事件冒泡
element.addEventListener('click', function(e) {
  e.stopPropagation();
  // 现在事件不会继续向上冒泡
});

// 阻止默认行为
link.addEventListener('click', function(e) {
  e.preventDefault();
  // 现在链接不会跳转
});

// 同时阻止冒泡和默认行为
element.addEventListener('click', function(e) {
  e.stopImmediatePropagation();
  // 阻止事件传播并阻止同一元素上的其他处理程序执行
});

// 创建自定义事件
const customEvent = new CustomEvent('myEvent', {
  detail: { message: '这是自定义数据' },
  bubbles: true,    // 事件是否冒泡
  cancelable: true  // 事件能否被取消
});

// 监听自定义事件
element.addEventListener('myEvent', function(e) {
  console.log('收到自定义事件:', e.detail.message);
});

// 派发事件
element.dispatchEvent(customEvent);

class Modal {
  constructor(element) {
    this.modal = element;
    this.isOpen = false;
    
    // 点击模态框内部阻止事件冒泡
    this.modal.addEventListener('click', (e) => {
      e.stopPropagation();
    });
    
    // 点击外部关闭模态框
    document.addEventListener('click', () => {
      if (this.isOpen) {
        this.close();
      }
    });
  }
  
  open() {
    this.modal.style.display = 'block';
    this.isOpen = true;
  }
  
  close() {
    this.modal.style.display = 'none';
    this.isOpen = false;
  }
}

class Dropdown {
  constructor(menuElement) {
    this.menu = menuElement;
    this.button = menuElement.querySelector('.dropdown-button');
    this.content = menuElement.querySelector('.dropdown-content');
    this.isOpen = false;
    
    // 点击按钮切换菜单
    this.button.addEventListener('click', (e) => {
      e.stopPropagation();
      this.toggle();
    });
    
    // 点击文档其他区域关闭菜单
    document.addEventListener('click', () => {
      if (this.isOpen) {
        this.close();
      }
    });
  }
  
  toggle() {
    if (this.isOpen) {
      this.close();
    } else {
      this.open();
    }
  }
  
  open() {
    this.content.style.display = 'block';
    this.isOpen = true;
  }
  
  close() {
    this.content.style.display = 'none';
    this.isOpen = false;
  }
}