// JSX内のイベント → Reactが自動でライフサイクル管理
<button onClick={handleClick}>クリック</button>
<input onChange={handleChange} />

// React外の領域 → useEffectで手動クリーンアップ
useEffect(() => {
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize); // 手動削除
}, []);

// 方法1: keyupイベント
const textbox = document.getElementById('myInput');
textbox.addEventListener('keyup', (event) => {
  const value = event.target.value;
  console.log('入力値:', value);
});

// 方法2: inputイベント（推奨）
textbox.addEventListener('input', (event) => {
  const value = event.target.value;
  console.log('入力値:', value);
});

// 方法3: MutationObserver
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
      console.log('値変更:', mutation.target.value);
    }
  });
});
observer.observe(textbox, { attributes: true });

// 方法1: onChange（推奨・標準）
function MyComponent() {
  const [value, setValue] = useState('');
  
  const handleChange = (event) => {
    setValue(event.target.value);
    console.log('入力値:', event.target.value);
  };
  
  return <input value={value} onChange={handleChange} />;
}

// 方法2: onInput（あまり使わない）
function MyComponent() {
  const [value, setValue] = useState('');
  
  return (
    <input 
      value={value} 
      onInput={(e) => setValue(e.target.value)} 
    />
  );
}

// useRef + イベントリスナー（Reactらしくない）
function MyComponent() {
  const inputRef = useRef(null);
  
  useEffect(() => {
    const input = inputRef.current;
    const handleInput = (e) => console.log(e.target.value);
    input.addEventListener('input', handleInput);
    return () => input.removeEventListener('input', handleInput);
  }, []);
  
  return <input ref={inputRef} />;
}

// 方法1: addEventListener
const button = document.getElementById('myButton');
button.addEventListener('click', (event) => {
  console.log('クリックされました');
  event.preventDefault(); // デフォルト動作を防ぐ
});

// 方法2: onclickプロパティ
button.onclick = function(event) {
  console.log('クリックされました');
};

// 方法3: HTML属性（非推奨）
// <button onclick="handleClick()">クリック</button>

// 方法1: onClick（標準）
function MyComponent() {
  const handleClick = (event) => {
    console.log('クリックされました');
    event.preventDefault(); // SyntheticEvent
  };
  
  return <button onClick={handleClick}>クリック</button>;
}

// 方法2: インライン関数
function MyComponent() {
  return (
    <button onClick={() => console.log('クリック')}>
      クリック
    </button>
  );
}

// 方法3: useCallback（パフォーマンス最適化）
function MyComponent() {
  const handleClick = useCallback(() => {
    console.log('クリックされました');
  }, []);
  
  return <button onClick={handleClick}>クリック</button>;
}

// useRef + addEventListener（Reactらしくない）
function MyComponent() {
  const buttonRef = useRef(null);
  
  useEffect(() => {
    const button = buttonRef.current;
    const handleClick = () => console.log('クリック');
    button.addEventListener('click', handleClick);
    return () => button.removeEventListener('click', handleClick);
  }, []);
  
  return <button ref={buttonRef}>クリック</button>;
}

// 方法1: submit イベント
const form = document.getElementById('myForm');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const formData = new FormData(form);
  console.log('送信データ:', Object.fromEntries(formData));
});

// 方法2: ボタンクリックで手動送信
const submitButton = document.getElementById('submitBtn');
submitButton.addEventListener('click', (event) => {
  event.preventDefault();
  // 手動でフォームデータを収集
  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;
  console.log({ name, email });
});

// 方法1: onSubmit（推奨）
function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  
  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('送信データ:', formData);
  };
  
  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <input name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <button type="submit">送信</button>
    </form>
  );
}

// useRef + FormData（非制御コンポーネント）
function MyForm() {
  const formRef = useRef(null);
  
  const handleSubmit = (event) => {
    event.preventDefault();
    const formData = new FormData(formRef.current);
    console.log('送信データ:', Object.fromEntries(formData));
  };
  
  return (
    <form ref={formRef} onSubmit={handleSubmit}>
      <input name="name" />
      <input name="email" />
      <button type="submit">送信</button>
    </form>
  );
}

// ホバー
const element = document.getElementById('myElement');
element.addEventListener('mouseenter', () => {
  console.log('マウス進入');
});
element.addEventListener('mouseleave', () => {
  console.log('マウス退出');
});

// ドラッグ
let isDragging = false;
element.addEventListener('mousedown', (e) => {
  isDragging = true;
  console.log('ドラッグ開始');
});
document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    console.log('ドラッグ中:', e.clientX, e.clientY);
  }
});
document.addEventListener('mouseup', () => {
  isDragging = false;
  console.log('ドラッグ終了');
});

// ホバー
function MyComponent() {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <div
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={{ backgroundColor: isHovered ? 'lightblue' : 'white' }}
    >
      ホバーしてください
    </div>
  );
}

// ドラッグ（グローバルイベントが必要）
function DraggableComponent() {
  const [isDragging, setIsDragging] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  
  const handleMouseDown = () => setIsDragging(true); // React管理
  
  const handleMouseMove = (e) => {
    if (isDragging) {
      setPosition({ x: e.clientX, y: e.clientY });
    }
  };
  
  const handleMouseUp = () => setIsDragging(false);
  
  useEffect(() => {
    if (isDragging) {
      // グローバルイベント = 手動管理
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
      return () => {
        document.removeEventListener('mousemove', handleMouseMove);
        document.removeEventListener('mouseup', handleMouseUp);
      };
    }
  }, [isDragging]);
  
  return (
    <div 
      onMouseDown={handleMouseDown} // React管理
      style={{ position: 'absolute', left: position.x, top: position.y }}
    >
      ドラッグできます
    </div>
  );
}

// グローバルキーイベント
document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Enterキー押下');
  }
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Ctrl+S 保存ショートカット');
  }
});

// 特定要素のキーイベント
const input = document.getElementById('myInput');
input.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    input.blur(); // フォーカス外す
  }
});

// 要素固有のキーイベント
function MyInput() {
  const inputRef = useRef(null);
  
  const handleKeyDown = (event) => {
    if (event.key === 'Escape') {
      inputRef.current.blur();
    }
    if (event.key === 'Enter') {
      console.log('入力確定:', event.target.value);
    }
  };
  
  return <input ref={inputRef} onKeyDown={handleKeyDown} />;
}

// グローバルキーイベント
function MyComponent() {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'Enter') {
        console.log('Enterキー押下');
      }
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('Ctrl+S 保存ショートカット');
      }
    };
    
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, []);
  
  return <div>キーイベント監視中</div>;
}

// ページロード
window.addEventListener('load', () => {
  console.log('ページ完全読み込み完了');
});

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM構築完了');
});

// ページアンロード
window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = ''; // 確認ダイアログ表示
});

window.addEventListener('unload', () => {
  console.log('ページ離脱');
});

// コンポーネントマウント・アンマウント
function MyComponent() {
  useEffect(() => {
    // マウント時（ページロード相当）
    console.log('コンポーネントマウント');
    
    // アンマウント時（ページアンロード相当）
    return () => {
      console.log('コンポーネントアンマウント');
    };
  }, []);
  
  return <div>コンポーネント</div>;
}

// ページ離脱防止
function MyComponent() {
  useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();
      event.returnValue = '';
    };
    
    window.addEventListener('beforeunload', handleBeforeUnload);
    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
  }, []);
  
  return <div>コンポーネント</div>;
}

// 複数イベントの組み合わせ例
function InteractiveComponent() {
  const [state, setState] = useState({
    isHovered: false,
    isDragging: false,
    value: ''
  });

  return (
    <div
      onMouseEnter={() => setState(s => ({...s, isHovered: true}))}
      onMouseLeave={() => setState(s => ({...s, isHovered: false}))}
      onDragStart={() => setState(s => ({...s, isDragging: true}))}
      onDragEnd={() => setState(s => ({...s, isDragging: false}))}
    >
      <input
        value={state.value}
        onChange={(e) => setState(s => ({...s, value: e.target.value}))}
        onFocus={() => console.log('フォーカス')}
        onBlur={() => console.log('ブラー')}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            console.log('エンター押下');
          }
        }}
      />
    </div>
  );
}