Basic Event Handling

Snippet

Basic Event Handling

In Svelte, you use the 'on:' directive to listen to DOM events. This is the standard way to handle user interactions like clicks, mouse movements, or keyboard input within your components.

snippet.js
javascript
<script>
  let count = 0;
  function handleClick() {
    count += 1;
  }
</script>
 
<button on:click={handleClick}>
  Clicks: {count}
</button>

svelte

Breakdown

on:click={handleClick}

Attaches a click event listener that triggers the handleClick function.

count += 1;

Updating a local variable automatically triggers a UI refresh in Svelte.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Basic Event Handling

Related