<div id="outer">
  <div id="inner">點(diǎn)擊我</div>
</div>

<script>
  const outer = document.getElementById('outer');
  const inner = document.getElementById('inner');
  
  // 捕獲階段（第三個(gè)參數(shù)為true）
  outer.addEventListener('click', function() {
    console.log('捕獲階段：外部元素');
  }, true);
  
  // 冒泡階段（第三個(gè)參數(shù)為false或省略）
  outer.addEventListener('click', function() {
    console.log('冒泡階段：外部元素');
  }, false);
  
  inner.addEventListener('click', function() {
    console.log('目標(biāo)元素');
  });
</script>

// 為每個(gè)列表項(xiàng)添加點(diǎn)擊事件
const items = document.querySelectorAll('.item');
items.forEach(item => {
  item.addEventListener('click', function() {
    console.log('點(diǎn)擊了項(xiàng)目:', this.textContent);
  });
});

// 動(dòng)態(tài)添加新項(xiàng)目時(shí)，新項(xiàng)目沒(méi)有事件處理
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新項(xiàng)目';
document.querySelector('.list').appendChild(newItem);
// 新項(xiàng)目沒(méi)有點(diǎn)擊事件！

// 將事件處理委托給父元素
document.querySelector('.list').addEventListener('click', function(e) {
  if (e.target.classList.contains('item')) {
    console.log('點(diǎn)擊了項(xiàng)目:', e.target.textContent);
  }
});

// 現(xiàn)在動(dòng)態(tài)添加的項(xiàng)目也會(huì)自動(dòng)擁有點(diǎn)擊事件
const newItem = document.createElement('li');
newItem.className = 'item';
newItem.textContent = '新項(xiàng)目';
document.querySelector('.list').appendChild(newItem);
// 新項(xiàng)目也有點(diǎn)擊事件！

// 阻止事件冒泡
element.addEventListener('click', function(e) {
  e.stopPropagation();
  // 現(xiàn)在事件不會(huì)繼續(xù)向上冒泡
});

// 阻止默認(rèn)行為
link.addEventListener('click', function(e) {
  e.preventDefault();
  // 現(xiàn)在鏈接不會(huì)跳轉(zhuǎn)
});

// 同時(shí)阻止冒泡和默認(rèn)行為
element.addEventListener('click', function(e) {
  e.stopImmediatePropagation();
  // 阻止事件傳播并阻止同一元素上的其他處理程序執(zhí)行
});

// 創(chuàng)建自定義事件
const customEvent = new CustomEvent('myEvent', {
  detail: { message: '這是自定義數(shù)據(jù)' },
  bubbles: true,    // 事件是否冒泡
  cancelable: true  // 事件能否被取消
});

// 監(jiān)聽(tīng)自定義事件
element.addEventListener('myEvent', function(e) {
  console.log('收到自定義事件:', e.detail.message);
});

// 派發(fā)事件
element.dispatchEvent(customEvent);

class Modal {
  constructor(element) {
    this.modal = element;
    this.isOpen = false;
    
    // 點(diǎn)擊模態(tài)框內(nèi)部阻止事件冒泡
    this.modal.addEventListener('click', (e) => {
      e.stopPropagation();
    });
    
    // 點(diǎn)擊外部關(guān)閉模態(tài)框
    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;
    
    // 點(diǎn)擊按鈕切換菜單
    this.button.addEventListener('click', (e) => {
      e.stopPropagation();
      this.toggle();
    });
    
    // 點(diǎn)擊文檔其他區(qū)域關(guān)閉菜單
    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;
  }
}