[Svelte 3] Use DOM events and event modifiers in Svelte 3

The whole magic of webapps is that users can interact with our code via various DOM events and Svelte is no exception in that regard.

In this quick lesson we're going to learn how to use DOM events in Svelte 3 as well as how to use event modifiers to alter DOM event behaviour (such as once and preventDefault)

Doc: https://v2.svelte.dev/guide#event-handler-modifiers

 

<script>
    let name;
    const sayHello = () => alert('Hello ' + name);
    const handleInput = e => name = e.target.value;
</script>

<h1>
    Hello:
</h1>
<input type="text" on:change={handleInput} />
<button on:click|preventDefault|once={sayHello}>Say name</button>