on:click on:input on:submit
Associe ouvintes de eventos do DOM diretamente à sintaxe de modelos do Svelte.
on:click on:input on:submit é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Diretivas de eventos
Use on: seguido pelo nome do evento do DOM para anexar um ouvinte.
<button on:click={handleClick}>Click</button>Manipuladores em linha
Passe uma função de seta para lógica em linha.
<button on:click={() => count++}>+</button>Manipuladores nomeados
Defina uma função no script e faça referência a ela pelo nome.
<script>
function save() { /* ... */ }
</script>
<button on:click={save}>Save</button>Receber o objeto de evento
O manipulador recebe o Event nativo como argumento.
function onChange(e) { value = e.target.value; }on:input
O evento input é disparado sempre que o usuário digita em um campo de texto.
<input on:input={(e) => text = e.target.value} />on:submit
Anexe a um <form> para tratar o envio. Use modificadores para impedir o comportamento padrão.
<form on:submit|preventDefault={save}>...</form>on:keydown
Escute eventos do teclado em campos de entrada ou globalmente no documento.
<input on:keydown={(e) => e.key === "Enter" && submit()} />on:change versus on:input
O evento change é disparado quando o usuário termina de editar; input é disparado a cada tecla pressionada.
Eventos do mouse
Todos os eventos padrão de mouse do DOM funcionam: mouseenter, mouseleave, mousemove.
Eventos de toque
Eventos de toque em dispositivos móveis, como touchstart, têm suporte da mesma forma.
<div on:touchstart={start} on:touchend={end}>Vários ouvintes
Você pode anexar várias diretivas on: ao mesmo elemento para eventos diferentes.
<button on:click={a} on:focus={b}>...</button>Verificação rápida
Qual sintaxe anexa um manipulador de clique?
Recapitulação
Use diretivas on:event para qualquer evento do DOM. O manipulador pode ser definido diretamente ou ser uma função nomeada e recebe o Event.
Perguntas Frequentes
A aula “on:click on:input on:submit” é grátis?
Sim — o texto completo de “on:click on:input on:submit” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “on:click on:input on:submit”?
Associe ouvintes de eventos do DOM diretamente à sintaxe de modelos do Svelte. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.
Quanto tempo leva a aula “on:click on:input on:submit”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- on:click on:input on:submit
- Modificadores de eventos: preventDefault stopPropagation once
- Eventos personalizados com createEventDispatcher
- Encaminhando eventos com on:click