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

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

// 冒泡階段監(jiān)聽彈窗內(nèi)容點擊，不會被遮罩的捕獲監(jiān)聽干擾
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('提交失敗，請重試');
    submitBtn.disabled = false;
  }
}, { once: true }); // 提交一次后自動移除監(jiān)聽器

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

// 錯誤用法：passive為true時調(diào)用preventDefault會報錯
window.addEventListener('touchmove', (e) => {
  e.preventDefault(); // 控制臺會拋出警告
}, { passive: true });

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

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

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

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

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

  init() {
    // 1. 事件委托監(jiā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. 滾動監(jiān)聽：高亮可視區(qū)域列表項（passive優(yōu)化滾動）
    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自動移除監(jiān)聽器）
    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() {
    // 實現(xiàn)可視區(qū)域判斷邏輯...
  }

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

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