// React中的事件使用
function Button() {
  const handleClick = (e) => {
    console.log(e) // 這是合成事件對象，不是原生事件
    console.log(e.nativeEvent) // 通過nativeEvent獲取原生事件
  }
  
  return <button onClick={handleClick}>點擊我</button>
}

// React 17+ 的事件綁定位置
ReactDOM.createRoot(document.getElementById('root')).render(<App />)
// 所有事件都委托在root元素上

// 注冊不同類型的事件
registerSimpleEvents();   // 注冊click、keyup等基礎(chǔ)事件
registerEvents$2();       // 注冊onMouseEnter等單階段事件
registerEvents$1();       // 注冊onChange相關(guān)事件
registerEvents$3();       // 注冊onSelect相關(guān)事件
registerEvents();         // 注冊onBeforeInput等事件

// 簡化版的事件分發(fā)邏輯
function dispatchEvent(domEventName, eventSystemFlags, targetContainer, nativeEvent) {
  // 找到觸發(fā)事件的DOM元素對應(yīng)的fiber節(jié)點
  const target = nativeEvent.target
  const targetInst = getClosestInstanceFromNode(target)
  
  // 創(chuàng)建合成事件
  const events = extractEvents(
    domEventName,
    targetInst,
    nativeEvent,
    target
  )
  
  // 按階段分發(fā)事件
  events.forEach(event => {
    runEventsInBatch(event)
  })
}

class EventOrderDemo extends React.Component {
  componentDidMount() {
    // 原生事件監(jiān)聽
    this.refs.button.addEventListener('click', () => {
      console.log('1. 原生事件：子元素')
    })
    
    document.addEventListener('click', () => {
      console.log('4. 原生事件：document')
    })
  }
  
  handleParentClick = () => {
    console.log('3. React事件：父元素')
  }
  
  handleChildClick = () => {
    console.log('2. React事件：子元素')
  }
  
  render() {
    return (
      <div onClick={this.handleParentClick} ref="parent">
        <button onClick={this.handleChildClick} ref="button">
          點擊我
        </button>
      </div>
    )
  }
}

// 輸出順序：
// 1. 原生事件：子元素
// 2. React事件：子元素
// 3. React事件：父元素
// 4. 原生事件：document

// React 16 示例
function handleClick(e) {
  console.log(e.target) // 正常輸出
  
  setTimeout(() => {
    console.log(e.target) // ? null！事件對象已被回收
  }, 100)
}

// 解決方案：使用e.persist()
function handleClickCorrect(e) {
  e.persist() // 從事件池中移除，保留屬性
  
  setTimeout(() => {
    console.log(e.target) // ? 正常輸出
  }, 100)
}

// React 17+，不需要e.persist()
function handleClick(e) {
  setTimeout(() => {
    console.log(e.target) // ? 正常輸出，事件池已移除
  }, 100)
}

function EventPropertiesDemo() {
  const handleEvent = (e) => {
    // 基礎(chǔ)屬性
    console.log(e.type)           // 事件類型：click
    console.log(e.target)         // 觸發(fā)事件的DOM元素
    console.log(e.currentTarget)  // 當(dāng)前處理事件的DOM元素
    console.log(e.nativeEvent)    // 原生事件對象
    
    // 事件方法
    e.preventDefault()   // 阻止默認行為
    e.stopPropagation()  // 阻止冒泡
    
    // 狀態(tài)查詢
    console.log(e.isDefaultPrevented())  // 是否已阻止默認行為
    console.log(e.isPropagationStopped()) // 是否已阻止冒泡
    
    // 其他屬性
    console.log(e.bubbles)     // 是否可冒泡
    console.log(e.cancelable)  // 是否可取消
    console.log(e.timeStamp)   // 事件觸發(fā)時間戳
  }
  
  return <button onClick={handleEvent}>測試事件</button>
}

// ? 不推薦：為每個列表項綁定事件
function BadList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => handleItem(item)}>
          {item.name}
        </li>
      ))}
    </ul>
  )
}

// ? 推薦：使用事件委托
function GoodList({ items }) {
  const handleListClick = (e) => {
    const target = e.target
    if (target.tagName === 'LI') {
      const id = target.dataset.id
      console.log('點擊了項目：', id)
    }
  }
  
  return (
    <ul onClick={handleListClick}>
      {items.map(item => (
        <li key={item.id} data-id={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  )
}

// ? 危險：混用可能導(dǎo)致事件不執(zhí)行
function BadMixing() {
  useEffect(() => {
    document.addEventListener('click', (e) => {
      e.stopPropagation() // 阻止了冒泡，React事件可能收不到
    })
  }, [])
  
  return <button onClick={() => console.log('不會執(zhí)行')}>點擊</button>
}

// ? 建議：統(tǒng)一使用React事件
function GoodPractice() {
  return <button onClick={() => console.log('正常執(zhí)行')}>點擊</button>
}

function FormDemo() {
  const handleSubmit = (e) => {
    // ? 阻止表單提交的默認行為
    e.preventDefault()
    
    // 處理表單邏輯
    submitForm()
  }
  
  const handleButtonClick = (e) => {
    // 只在必要時阻止冒泡
    if (shouldStopPropagation) {
      e.stopPropagation()
    }
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <button onClick={handleButtonClick}>提交</button>
    </form>
  )
}

// React 16及以前：需要用e.persist()
function handleAsync(e) {
  e.persist()
  setTimeout(() => {
    console.log(e.target)
  }, 100)
}

// React 17+：直接使用即可
function handleAsync(e) {
  setTimeout(() => {
    console.log(e.target) // 沒問題
  }, 100)
}