Exemplos Práticos de Eventos

Eventos de Mouse

Click e Double Click

function BotoesInterativos() {
  const [cliques, setCliques] = useState(0);
  const [duplos, setDuplos] = useState(0);

  const handleClick = () => {
    setCliques(cliques + 1);
  };

  const handleDoubleClick = () => {
    setDuplos(duplos + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Clique: {cliques}</button>
      <button onDoubleClick={handleDoubleClick}>Duplo: {duplos}</button>
    </div>
  );
}

Hover (Mouse Enter/Leave)

function CardHover() {
  const [hovering, setHovering] = useState(false);

  return (
    <div
      onMouseEnter={() => setHovering(true)}
      onMouseLeave={() => setHovering(false)}
      style={{
        padding: '20px',
        backgroundColor: hovering ? '#e0e0e0' : '#f5f5f5',
        transition: 'background-color 0.3s'
      }}
    >
      {hovering ? 'Mouse sobre o card!' : 'Passe o mouse aqui'}
    </div>
  );
}

Eventos de Teclado

Detectando Teclas Específicas

function DetectorTeclas() {
  const [ultimaTecla, setUltimaTecla] = useState('');
  const [enter, setEnter] = useState(0);

  const handleKeyDown = (e) => {
    setUltimaTecla(e.key);
    
    if (e.key === 'Enter') {
      setEnter(enter + 1);
    }
    
    // Prevenir comportamento padrão para algumas teclas
    if (e.key === 'Tab') {
      e.preventDefault();
      console.log('Tab foi prevenido');
    }
  };

  return (
    <div>
      <input
        type="text"
        onKeyDown={handleKeyDown}
        placeholder="Digite algo..."
      />
      <p>Última tecla: {ultimaTecla}</p>
      <p>Enter pressionado: {enter} vezes</p>
    </div>
  );
}

Atalhos de Teclado

function AtalhosTeclado() {
  const [acao, setAcao] = useState('');

  useEffect(() => {
    const handleKeyPress = (e) => {
      // Ctrl/Cmd + S
      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        setAcao('Salvando...');
        setTimeout(() => setAcao(''), 2000);
      }
      
      // Ctrl/Cmd + K
      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
        e.preventDefault();
        setAcao('Abrindo busca...');
      }
    };

    window.addEventListener('keydown', handleKeyPress);
    return () => window.removeEventListener('keydown', handleKeyPress);
  }, []);

  return (
    <div>
      <p>Tente Ctrl+S ou Ctrl+K</p>
      {acao && <p style={{ color: 'green' }}>{acao}</p>}
    </div>
  );
}

Passando Parâmetros para Handlers

Usando Arrow Functions

function ListaItens() {
  const itens = ['Maçã', 'Banana', 'Laranja'];
  const [selecionado, setSelecionado] = useState('');

  const handleClick = (item) => {
    setSelecionado(item);
  };

  return (
    <div>
      <ul>
        {itens.map(item => (
          <li key={item}>
            <button onClick={() => handleClick(item)}>
              {item}
            </button>
          </li>
        ))}
      </ul>
      <p>Selecionado: {selecionado}</p>
    </div>
  );
}

Usando o Evento

function FormularioDinamico() {
  const [valores, setValores] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setValores(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <form>
      <input
        name="nome"
        placeholder="Nome"
        onChange={handleChange}
      />
      <input
        name="email"
        placeholder="Email"
        onChange={handleChange}
      />
      <pre>{JSON.stringify(valores, null, 2)}</pre>
    </form>
  );
}

Propagação de Eventos

Stopando Propagação

function PropagacaoEventos() {
  const handleDivClick = () => {
    console.log('Div clicada');
  };

  const handleButtonClick = (e) => {
    e.stopPropagation(); // Impede que o evento suba para a div
    console.log('Botão clicado');
  };

  return (
    <div 
      onClick={handleDivClick}
      style={{ padding: '50px', backgroundColor: '#f0f0f0' }}
    >
      <button onClick={handleButtonClick}>
        Clique (sem propagar)
      </button>
    </div>
  );
}

Eventos Customizados

Criando e Disparando

function ComponenteComEventoCustom() {
  useEffect(() => {
    const handleCustomEvent = (e) => {
      console.log('Evento customizado recebido:', e.detail);
    };

    window.addEventListener('meuEventoCustom', handleCustomEvent);

    return () => {
      window.removeEventListener('meuEventoCustom', handleCustomEvent);
    };
  }, []);

  const dispararEvento = () => {
    const evento = new CustomEvent('meuEventoCustom', {
      detail: { mensagem: 'Olá do React!' }
    });
    window.dispatchEvent(evento);
  };

  return (
    <button onClick={dispararEvento}>
      Disparar Evento Customizado
    </button>
  );
}

Performance com Eventos

Debouncing

function CampoBusca() {
  const [busca, setBusca] = useState('');
  const [resultados, setResultados] = useState([]);

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      if (busca) {
        console.log('Buscando:', busca);
        // Simular busca
        setResultados([`Resultado para "${busca}"`]);
      }
    }, 500);

    return () => clearTimeout(timeoutId);
  }, [busca]);

  return (
    <div>
      <input
        type="text"
        value={busca}
        onChange={(e) => setBusca(e.target.value)}
        placeholder="Digite para buscar..."
      />
      <ul>
        {resultados.map((r, i) => <li key={i}>{r}</li>)}
      </ul>
    </div>
  );
}

Throttling

function ScrollInfinito() {
  const [scrolls, setScrolls] = useState(0);
  const [canScroll, setCanScroll] = useState(true);

  const handleScroll = () => {
    if (!canScroll) return;
    
    setCanScroll(false);
    setScrolls(prev => prev + 1);
    
    setTimeout(() => {
      setCanScroll(true);
    }, 200); // Throttle de 200ms
  };

  return (
    <div
      onScroll={handleScroll}
      style={{ height: '200px', overflow: 'auto' }}
    >
      <div style={{ height: '500px' }}>
        <p>Scroll detectado: {scrolls} vezes</p>
        <p>Role para baixo...</p>
      </div>
    </div>
  );
}

Boas Práticas

1. Use funções nomeadas para handlers complexos
2. Evite criar funções inline em renders (performance)
3. Sempre limpe listeners em useEffect
4. Use preventDefault() quando necessário
5. Considere debounce/throttle para eventos frequentes