// 創(chuàng)建帶數(shù)據(jù)的自定義事件
const event = new CustomEvent('user-login', {
  detail: {
    userId: 123,
    username: 'Alice',
    timestamp: Date.now()
  },
  bubbles: true,    // 是否冒泡
  cancelable: true  // 是否可取消
});

// 派發(fā)事件
document.dispatchEvent(event);

// 在特定元素上派發(fā)（精準(zhǔn)控制范圍）
const appRoot = document.getElementById('app');
appRoot.dispatchEvent(new CustomEvent('theme-change', { 
  detail: { theme: 'dark' } 
}));

// 在document或window上派發(fā)（全局廣播）
window.dispatchEvent(new CustomEvent('global-alert', { 
  detail: { message: '系統(tǒng)升級(jí)中...' } 
}));

// 創(chuàng)建獨(dú)立事件目標(biāo)（避免污染DOM）
class EventBus {
  constructor() {
    this.target = document.createDocumentFragment();
  }
  on(event, callback) {
    this.target.addEventListener(event, callback);
  }
  emit(event, detail) {
    this.target.dispatchEvent(new CustomEvent(event, { detail }));
  }
}

const bus = new EventBus();
bus.on('data-update', (e) => console.log(e.detail));
bus.emit('data-update', { id: 1 });

// 基礎(chǔ)監(jiān)聽
document.addEventListener('user-login', (e) => {
  console.log('用戶登錄:', e.detail.username);
});

// 一次性監(jiān)聽（自動(dòng)移除）
element.addEventListener('click', handler, { once: true });

// 捕獲階段監(jiān)聽（先于冒泡階段）
element.addEventListener('click', handler, { capture: true });

// 被動(dòng)監(jiān)聽（提升滾動(dòng)性能）
element.addEventListener('wheel', handler, { passive: true });

// ? 錯(cuò)誤：匿名函數(shù)無法移除
element.addEventListener('click', () => console.log('clicked'));

// ? 正確：命名函數(shù) + removeEventListener
function handleClick() {
  console.log('clicked');
}
element.addEventListener('click', handleClick);
// ...在適當(dāng)時(shí)候移除
element.removeEventListener('click', handleClick);

useEffect(() => {
  const handler = (e) => setMessage(e.detail);
  window.addEventListener('custom-message', handler);
  
  // 清理函數(shù)
  return () => {
    window.removeEventListener('custom-message', handler);
  };
}, []);

// Vue子應(yīng)用中派發(fā)
window.parent.window.dispatchEvent(
  new CustomEvent('vue-to-react', { 
    detail: { action: 'updateCart', count: 5 } 
  })
);

// React主應(yīng)用中監(jiān)聽
window.addEventListener('vue-to-react', (e) => {
  updateGlobalState(e.detail); // 更新全局狀態(tài)
});

const canvas = document.getElementById('myCanvas');
canvas.addEventListener('click', (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  
  // 通知React組件
  canvas.dispatchEvent(new CustomEvent('canvas-click', { 
    detail: { x, y } 
  }));
});

// React組件監(jiān)聽
useEffect(() => {
  const canvas = document.getElementById('myCanvas');
  const handler = (e) => setClickPos(e.detail);
  canvas.addEventListener('canvas-click', handler);
  return () => canvas.removeEventListener('canvas-click', handler);
}, []);

// 子組件（不關(guān)心父組件是誰）
class ChildComponent extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `<button>點(diǎn)擊我</button>`;
    this.querySelector('button').onclick = () => {
      this.dispatchEvent(new CustomEvent('child-action', { 
        detail: { data: '來自子組件' },
        bubbles: true // 冒泡到父組件
      }));
    };
  }
}
customElements.define('my-child', ChildComponent);

// 父組件監(jiān)聽
document.querySelector('my-parent').addEventListener('child-action', (e) => {
  console.log('收到子組件消息:', e.detail.data);
});

// 主應(yīng)用（React）
function App() {
  useEffect(() => {
    const handler = (e) => {
      switch(e.detail.type) {
        case 'AUTH_LOGIN':
          setUser(e.detail.payload);
          break;
        case 'THEME_CHANGE':
          setTheme(e.detail.payload);
          break;
      }
    };
    window.addEventListener('micro-frontend-event', handler);
    return () => window.removeEventListener('micro-frontend-event', handler);
  }, []);

  return <div id="root">...</div>;
}

// 子應(yīng)用（Vue）
this.$nextTick(() => {
  window.parent.window.dispatchEvent(
    new CustomEvent('micro-frontend-event', {
      detail: {
        type: 'AUTH_LOGIN',
        payload: { token: 'xxx', name: 'Bob' }
      }
    })
  );
});

// Canvas繪圖類
class DrawingBoard {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.bindEvents();
  }

  bindEvents() {
    this.canvas.addEventListener('mousedown', (e) => {
      const pos = this.getMousePos(e);
      this.canvas.dispatchEvent(new CustomEvent('draw-start', { 
        detail: pos 
      }));
    });

    this.canvas.addEventListener('mousemove', (e) => {
      if (this.isDrawing) {
        const pos = this.getMousePos(e);
        this.canvas.dispatchEvent(new CustomEvent('draw-move', { 
          detail: pos 
        }));
      }
    });
  }

  getMousePos(e) {
    const rect = this.canvas.getBoundingClientRect();
    return {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top
    };
  }
}

// React組件消費(fèi)事件
function App() {
  useEffect(() => {
    const canvas = document.getElementById('canvas');
    const board = new DrawingBoard(canvas);
    
    canvas.addEventListener('draw-start', (e) => {
      setCurrentPath([e.detail]);
    });
    
    canvas.addEventListener('draw-move', (e) => {
      addPointToPath(e.detail);
    });
  }, []);
}

// 封裝ECharts組件
class EChartsWrapper {
  constructor(element, option) {
    this.chart = echarts.init(element);
    this.chart.setOption(option);
    this.bindEvents();
  }

  bindEvents() {
    this.chart.on('click', (params) => {
      // 轉(zhuǎn)發(fā)為自定義事件
      this.chart.getDom().dispatchEvent(
        new CustomEvent('chart-click', { 
          detail: params 
        })
      );
    });
  }
}

// 業(yè)務(wù)組件監(jiān)聽
const chartElement = document.getElementById('chart');
const chart = new EChartsWrapper(chartElement, options);

chartElement.addEventListener('chart-click', (e) => {
  showModal(`點(diǎn)擊了系列: ${e.detail.seriesName}`);
});

const event = new Event('myEvent');
document.dispatchEvent(event);

const customEvent = new CustomEvent('userLogin', {
  detail: { username: 'Alice' }
});

const button = document.querySelector('button');
button.addEventListener('userClick', (e) => {
  console.log('自定義事件觸發(fā):', e.detail);
});
button.dispatchEvent(new CustomEvent('userClick', { detail: 'Clicked!' }));

window.addEventListener('dataUpdate', (e) => {
  console.log('數(shù)據(jù)更新:', e.detail);
});
window.dispatchEvent(new CustomEvent('dataUpdate', { detail: { id: 1 } }));

const event = new CustomEvent('bubbleEvent', { bubbles: true });
document.body.dispatchEvent(event);
document.addEventListener('bubbleEvent', () => console.log('冒泡捕獲'));

element.addEventListener('custom', (e) => {
  e.stopPropagation();
  console.log('事件停止');
});
element.dispatchEvent(new CustomEvent('custom', { bubbles: true }));

class MyComponent extends HTMLElement {
  connectedCallback() {
    this.dispatchEvent(new CustomEvent('ready', { detail: 'Component ready' }));
  }
}
customElements.define('my-component', MyComponent);

const event = new CustomEvent('shadowEvent', { composed: true, bubbles: true });
shadowRoot.dispatchEvent(event);

const handler = (e) => {
  console.log('觸發(fā)一次');
  window.removeEventListener('onceEvent', handler);
};
window.addEventListener('onceEvent', handler);
window.dispatchEvent(new Event('onceEvent'));

// 發(fā)送端
document.dispatchEvent(new CustomEvent('messageReceived', { detail: { text: 'Hello' } }));
// 接收端
document.addEventListener('messageReceived', (e) => {
  console.log('收到消息:', e.detail.text);
});