Eventos

Vamos falar sobre eventos no DOM. Podemos acionar um evento em um elemento usando a diretiva on:. Os eventos podem ser declarados de forma explícita, ou inline. Observe abaixo:

Eventos declarados

<script>
    // Aqui estamos declarando a função que será utilizada no botão.
	function handleClick() {
		console.log('click')
	}
</script>

<button on:click={handleClick}>Clique aqui</button>

Veja em ação:

Eventos inline

<button on:click={() => console.log('click')}>Clique aqui</button>

O resultado será o mesmo.

Obs: De acordo com a documentação do svelte, não há motivos para seu preocupar com a performance quando utilizar eventos inline dentro de loops. Eles afirmam que o compilador vai lidar com essa situação da forma correta. Essa abordagem pode não ser recomendada em outros frameworks.

Modificadores de eventos

Servem para alterar o comportamento de um evento. Por exemplo, event.preventDefault() que pode ser usado para alterar o comportamento padrão de um formulário.

O svelte lida com esses modificadores de uma forma super simples. Veja como é feito:

Basta adicionar um “|modificador” após o evento, porém, antes da chamada da função.

<button on:click|once={() => alert('click')}>
	Click me
</button>

Esse once faz com que a função seja executada apenas uma vez. Observe:

Segue abaixo a lista completa dos modificadores de eventos.

• preventDefault - Documentação
• stopPropagation - Documentação
• passive - Documentação
• nonpassive - Determina passive como false.
• capture - Documentação
• once - Remove o evento após a primeira execução.
• self - Aciona o evento apenas se “event.target”(elemento clicado) for igual ao “event.currentTarget”(elemento que tem o evento de clique). Ou seja, se o evento acionado for no próprio elemento.
• trusted - Só aciona o manipulador se o evento for acionado por uma ação do usuário. Se “event.isTrusted” for true.

E também uma lista de exemplos de eventos.

• on:blur
• on:change
• on:drag
• on:focus
• on:keypress
• on:mousemove
• on:play

E vários outros…