function handleClick(e) {
  // e is a SyntheticEvent, not the raw MouseEvent
  console.log(e.type)          // "click"
  console.log(e.target)        // the DOM element that was clicked
  console.log(e.currentTarget) // the element the handler is attached to
  console.log(e.nativeEvent)   // the underlying native browser Event
}

function Container() {
  function handleClick(e) {
    console.log('target:', e.target.tagName)        // could be SPAN, IMG, etc.
    console.log('currentTarget:', e.currentTarget.tagName) // always DIV
  }

  return (
    <div onClick={handleClick}>
      <span>Click me</span>
      <img src="logo.png" alt="" />
    </div>
  )
}

// Clicking the span:
//   target: SPAN
//   currentTarget: DIV

// Clicking the image:
//   target: IMG
//   currentTarget: DIV

import { useState } from 'react'

function NameInput() {
  const [name, setName] = useState('')

  function handleChange(e) {
    setName(e.target.value) // e.target is the <input>, .value is its text
  }

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={handleChange}
        placeholder="Enter your name"
      />
      <p>Hello, {name || 'stranger'}!</p>
    </div>
  )
}

function KeyboardDemo() {
  function handleKeyDown(e) {
    // Cmd+S or Ctrl+S — save shortcut
    if (e.key === 's' && (e.metaKey || e.ctrlKey)) {
      e.preventDefault()
      saveDraft()
    }

    // Escape — close modal
    if (e.key === 'Escape') {
      closeModal()
    }

    // Arrow keys — navigate list
    if (e.key === 'ArrowDown') {
      selectNext()
    }

    if (e.key === 'ArrowUp') {
      selectPrev()
    }
  }

  return <div onKeyDown={handleKeyDown} tabIndex={0} />
}

function ClickCoordinates() {
  const [pos, setPos] = useState({ x: 0, y: 0 })

  function handleClick(e) {
    setPos({
      x: e.clientX, // X position relative to the viewport
      y: e.clientY, // Y position relative to the viewport
    })

    console.log('pageX:', e.pageX)     // X relative to the full page
    console.log('screenX:', e.screenX) // X relative to the screen
    console.log('button:', e.button)   // 0=left, 1=middle, 2=right
    console.log('buttons:', e.buttons) // bitmask of currently pressed buttons
  }

  return (
    <div onClick={handleClick} style={{ height: 200, background: '#f0f0f0' }}>
      <p>Click anywhere</p>
      <p>Last click: ({pos.x}, {pos.y})</p>
    </div>
  )
}

// e.preventDefault() — stops the browser's default action
// e.g., prevent form reload, prevent link navigation, prevent right-click menu

function LinkWithConfirm({ href, children }) {
  function handleClick(e) {
    e.preventDefault()  // don't navigate
    if (confirm('Are you sure you want to leave?')) {
      window.location.href = href
    }
  }

  return <a href={href} onClick={handleClick}>{children}</a>
}

// e.stopPropagation() — stops the event from bubbling to parent elements

function Modal({ onClose, children }) {
  return (
    <div className="overlay" onClick={onClose}>
      <div
        className="modal"
        onClick={e => e.stopPropagation()} // click inside modal doesn't close it
      >
        {children}
      </div>
    </div>
  )
}

function FileDropZone() {
  function handleDrop(e) {
    e.preventDefault()
    // DataTransfer is on the native event
    const files = e.nativeEvent.dataTransfer.files
    processFiles(files)
  }

  return (
    <div onDrop={handleDrop} onDragOver={e => e.preventDefault()}>
      Drop files here
    </div>
  )
}

// React 17+: this works correctly
function handleChange(e) {
  const value = e.target.value
  setTimeout(() => {
    console.log(value)     // ✓ works fine
    console.log(e.target)  // ✓ also works (event is not pooled)
  }, 1000)
}

// React 16 workaround (no longer needed):
function handleChangeLegacy(e) {
  e.persist() // prevent event from being returned to pool
  setTimeout(() => {
    console.log(e.target.value) // would have been null without e.persist()
  }, 1000)
}

import { ChangeEvent, FormEvent, KeyboardEvent, MouseEvent } from 'react'

function TypedForm() {
  function handleInputChange(e: ChangeEvent<HTMLInputElement>) {
    console.log(e.target.value) // string
  }

  function handleSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
  }

  function handleKeyDown(e: KeyboardEvent<HTMLTextAreaElement>) {
    if (e.key === 'Enter') { /* ... */ }
  }

  function handleButtonClick(e: MouseEvent<HTMLButtonElement>) {
    console.log(e.clientX, e.clientY)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input onChange={handleInputChange} />
      <textarea onKeyDown={handleKeyDown} />
      <button onClick={handleButtonClick} type="submit">Go</button>
    </form>
  )
}