Aula 07 - Eventos e Formulários ⌨️

Objetivo

Objetivo: Aprender a capturar interações do usuário, manipular eventos do DOM e dominar o Two-way Binding para criar formulários reativos e inteligentes.

1. Escutando Eventos com `on:` 👂

No Svelte, para escutar qualquer evento do DOM (como clique, movimento do mouse ou digitação), usamos a diretiva on:.

<script>
  let contador = 0;
  function incrementar() {
    contador += 1;
  }
</script>

<!-- Chamando uma função -->
<button on:click={incrementar}>
  Cliques: {contador}
</button>

<!-- Código inline -->
<button on:mouseenter={() => console.log('Mouse entrou!')}>
  Passe o mouse
</button>

2. Modificadores de Evento 🛠️

O Svelte facilita a vida permitindo adicionar modificadores aos eventos usando o caractere |.

on:click|once: O evento só dispara uma vez.
on:submit|preventDefault: Impede que a página recarregue ao enviar um formulário.
on:click|stopPropagation: Evita que o evento suba para os elementos pais.

3. Two-way Binding (`bind:value`) 🔄

Normalmente, a informação flui do JavaScript para o HTML. Com o bind:, fazemos a informação fluir nos dois sentidos. Se o usuário digita no input, a variável muda. Se a variável mudar no código, o input atualiza.

Fluxo de Dados (Mermaid)

graph LR
    subgraph "One-way (Padrão)"
        JS1[Variável JS] -- "Atualiza" --> UI1[Interface]
    end

    subgraph "Two-way (bind:value)"
        JS2[Variável JS] <--> UI2[Interface / Input]
    end

<script>
  let nome = "";
</script>

<input type="text" bind:value={nome} placeholder="Digite seu nome" />
<p>Seu nome é: {nome}</p>

4. Trabalhando com Grupos (Checkboxes e Radios) 🔘

O Svelte torna o trabalho com múltiplos inputs muito simples:

<script>
  let sabores = []; // Array para múltiplos checkboxes
  let tamanho = "M"; // String para rádio único
</script>

<label>
  <input type="radio" bind:group={tamanho} value="P" /> Pequeno
</label>
<label>
  <input type="radio" bind:group={tamanho} value="M" /> Médio
</label>

<p>Tamanho selecionado: {tamanho}</p>

5. Simulação de Formulário em Tempo Real 💻

<div id="termynal" data-termynal>
    <span data-ty="input">bind:value={email}</span>
    <span data-ty="progress"></span>
    <span data-ty># Digitando: r... i... c...</span>
    <span data-ty>email = 'ricardo@'</span>
    <span data-ty># Svelte valida instantaneamente!</span>
</div>

6. Mini-Projeto: Cadastro de Perfil 🚀

Sua missão hoje: 1. Crie um formulário com campos para nome, email e biografia (textarea). 2. Adicione um seletor (select) para o cargo (ex: Estudante, Professor, Desenvolvedor). 3. Use o bind:value em todos os campos. 4. Exiba abaixo do formulário um "Preview" do perfil que atualiza enquanto o usuário digita. 5. Adicione um botão de "Salvar" que limpe as variáveis ao ser clicado.

Atenção

Sempre use bind:value com cuidado em campos muito grandes para evitar problemas de performance, embora o Svelte lide muito bem com isso na maioria dos casos.

7. Exercício de Fixação 📝

Como você impediria um formulário de recarregar a página ao ser enviado?
Qual a diferença entre usar {valor} e bind:value={valor} em um input?
Como capturamos vários valores selecionados em um grupo de checkboxes?

Próxima Aula: Vamos deixar tudo bonito com Estilização e Escopo de CSS! 🎨