const mask = document.getElementById('mask');
const modal = document.getElementById('modal');

// 捕獲階段監(jiān)聽(tīng)遮罩點(diǎn)擊，優(yōu)先觸發(fā)
mask.addEventListener('click', () => {
  modal.style.display = 'none';
}, { capture: true });

// 冒泡階段監(jiān)聽(tīng)彈窗內(nèi)容點(diǎn)擊，不會(huì)被遮罩的捕獲監(jiān)聽(tīng)干擾
modal.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件繼續(xù)冒泡到遮罩
});

const form = document.getElementById('myForm');
const submitBtn = form.querySelector('button[type="submit"]');

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  submitBtn.disabled = true; // 輔助禁用按鈕
  try {
    const formData = new FormData(form);
    await fetch('/api/submit', { method: 'POST', body: formData });
    alert('提交成功');
  } catch (err) {
    alert('提交失敗，請(qǐng)重試');
    submitBtn.disabled = false;
  }
}, { once: true }); // 提交一次后自動(dòng)移除監(jiān)聽(tīng)器

// 移動(dòng)端滾動(dòng)監(jiān)聽(tīng)優(yōu)化
window.addEventListener('scroll', () => {
  const backToTop = document.getElementById('backToTop');
  // 滾動(dòng)超過(guò)300px顯示回到頂部按鈕
  backToTop.style.display = window.scrollY > 300 ? 'block' : 'none';
}, { passive: true }); // 明確聲明不會(huì)阻止默認(rèn)滾動(dòng)

// 錯(cuò)誤用法：passive為true時(shí)調(diào)用preventDefault會(huì)報(bào)錯(cuò)
window.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 控制臺(tái)會(huì)拋出警告
}, { passive: true });

// 創(chuàng)建控制器實(shí)例
const abortController = new AbortController();
const { signal } = abortController;

// 綁定多個(gè)監(jiān)聽(tīng)器，共享同一個(gè)signal
window.addEventListener('scroll', handleScroll, { signal });
document.addEventListener('resize', handleResize, { signal });
button.addEventListener('click', handleClick, { signal });

// 組件卸載時(shí)批量移除所有監(jiān)聽(tīng)器
function destroyComponent() {
  abortController.abort(); // 一次調(diào)用，所有關(guān)聯(lián)監(jiān)聽(tīng)器失效
}

// 條件性取消：比如3秒后自動(dòng)停止監(jiān)聽(tīng)滾動(dòng)
setTimeout(() => {
  abortController.abort('自動(dòng)取消監(jiān)聽(tīng)');
  console.log(signal.reason); // 輸出"自動(dòng)取消監(jiān)聽(tīng)"
}, 3000);

class EditableList {
  constructor(containerId) {
    this.container = document.getElementById(containerId);
    // 創(chuàng)建監(jiān)聽(tīng)器控制器
    this.abortController = new AbortController();
    this.init();
  }

  init() {
    // 1. 事件委托監(jiān)聽(tīng)列表項(xiàng)點(diǎn)擊（捕獲階段優(yōu)化性能）
    this.container.addEventListener('click', (e) => {
      if (e.target.matches('.list-item')) {
        this.showEditBox(e.target);
      }
    }, { capture: false, signal: this.abortController.signal });

    // 2. 滾動(dòng)監(jiān)聽(tīng)：高亮可視區(qū)域列表項(xiàng)（passive優(yōu)化滾動(dòng)）
    window.addEventListener('scroll', () => {
      this.highlightVisibleItems();
    }, { passive: true, signal: this.abortController.signal });
  }

  showEditBox(item) {
    const editBox = item.querySelector('.edit-box');
    const confirmBtn = editBox.querySelector('.confirm-btn');
    editBox.style.display = 'block';

    // 3. 確認(rèn)按鈕僅生效一次（once自動(dòng)移除監(jiān)聽(tīng)器）
    confirmBtn.addEventListener('click', () => {
      const input = editBox.querySelector('input');
      item.querySelector('.content').textContent = input.value;
      editBox.style.display = 'none';
    }, { once: true, signal: this.abortController.signal });
  }

  highlightVisibleItems() {
    // 實(shí)現(xiàn)可視區(qū)域判斷邏輯...
  }

  // 組件銷(xiāo)毀：批量清理所有監(jiān)聽(tīng)器
  destroy() {
    this.abortController.abort();
    this.container.remove();
  }
}

// 使用組件
const list = new EditableList('list-container');
// 頁(yè)面關(guān)閉或組件卸載時(shí)銷(xiāo)毀
window.addEventListener('beforeunload', () => list.destroy());