// React 16以前：documentにイベント委譲
document.addEventListener('click', reactEventHandler);

// React 17以降：rootElementにイベント委譲
rootElement.addEventListener('click', reactEventHandler);

// Automatic Batching の導入
// イベント処理のバッチング方法が変更
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // React 18: 自動的にバッチング（1回の再レンダリング）
  // React 17: 2回の再レンダリング
});

// 将来的な可能性（仮想的な例）
<input 
  onChange={handleChange}
  priority="user-blocking" // 高優先度
/>
<div 
  onScroll={handleScroll}
  priority="background" // 低優先度
/>

// 現在：同期的なイベント処理
const handleClick = () => {
  // 重い処理が全て同期実行
  processHeavyData();
  updateUI();
};

// 将来的な可能性：中断可能な処理
const handleClick = () => {
  startTransition(() => {
    // 中断可能な処理として実行
    processHeavyData();
    updateUI();
  });
};

// 将来的な可能性
const handleAsyncAction = async () => {
  // イベントハンドラー内でのSuspense制御
  return <Suspense fallback={<Loading />}>
    <AsyncComponent />
  </Suspense>;
};

// ✅ 推奨：React標準のイベントハンドラー
<button onClick={handleClick}>

// ❌ 避ける：直接的なDOM操作
useEffect(() => {
  document.addEventListener('click', handler);
}, []);

// 機能フラグを使用した段階的移行
const useNewEventHandling = process.env.REACT_VERSION >= 18;

function Component() {
  if (useNewEventHandling) {
    return <NewEventComponent />;
  }
  return <LegacyEventComponent />;
}

// 自動化されたイベント処理テスト
describe('Event Handling Compatibility', () => {
  it('should handle click events consistently', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick} />);
    
    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

// 警告・エラーの監視
console.warn = (originalWarn => {
  return (...args) => {
    if (args[0]?.includes('React')) {
      // React関連の警告をログ収集
      logToMonitoring('react-warning', args);
    }
    originalWarn(...args);
  };
})(console.warn);

// React内部的には以下のイベントを統合
- click (左クリック)
- auxclick (中・右クリック)
- キーボードでのアクティベート (Enter/Space)

// Reactが内部で正規化
wheel → { deltaX, deltaY, deltaZ }
mousewheel → { wheelDeltaX, wheelDeltaY } → 正規化
DOMMouseScroll → { detail } → 正規化

// React SyntheticKeyboardEvent での正規化
event.key    // 標準化された文字・キー名
event.code   // 物理キーの識別子
event.which  // レガシー対応（非推奨）
event.keyCode // レガシー対応（非推奨）

// ブラウザのネイティブchangeは要素がフォーカスを失った時
// ReactのonChangeは入力中にリアルタイムで発火
<input onChange={...} /> // React版：リアルタイム
vs
document.querySelector('input').onchange = ... // ネイティブ：フォーカス時

// モダンな手法：pointer events（React 17+で改善）
onPointerDown  // タッチ・マウス・ペン統合
onPointerMove  // より統一的なAPI
onPointerUp    // クロスプラットフォーム対応

// iOS Safariでは自動再生に制限
<video onPlay={...} muted playsInline /> // 必要な属性

// React 16以前
document.addEventListener('click', reactEventHandler);

// React 17以降
rootElement.addEventListener('click', reactEventHandler);

// ブラウザ間の差異をReactが吸収
const syntheticEvent = {
  // 標準化されたプロパティ
  type: 'click',
  target: element,
  currentTarget: element,
  preventDefault: () => {},
  stopPropagation: () => {},
  
  // ブラウザ間で統一された値
  clientX: normalizedX,
  clientY: normalizedY,
  key: normalizedKey, // IE11でも標準的な値
  
  // オリジナルイベントへのアクセス
  nativeEvent: originalBrowserEvent
};

// ✅ 推奨：React SyntheticEvent を使用
const handleKeyDown = (event) => {
  if (event.key === 'Enter') { /* 処理 */ }
};

// ❌ 非推奨：ブラウザ固有プロパティ
const handleKeyDown = (event) => {
  if (event.keyCode === 13) { /* 処理 */ }
};

// タッチイベント対応の確認
const isTouchDevice = 'ontouchstart' in window;

// ポインターイベント対応の確認
const hasPointerEvents = 'onpointerdown' in window;

function UniversalButton({ onClick, children }) {
  return (
    <button
      onClick={onClick}
      onTouchStart={isTouchDevice ? handleTouchStart : undefined}
      onPointerDown={hasPointerEvents ? handlePointerDown : undefined}
    >
      {children}
    </button>
  );
}