Svelte Events

An event fires when something happens on the page, such as a click, a key press, or a mouse movement. Svelte lets you listen for these events and run a function in response.

Listening For A Click Event

The on:click directive attaches a click listener to an element. Whenever a visitor clicks that element, Svelte runs the function you connected to it.

<script>
  function sayHello() {
    alert("Hello there");
  }
</script>

<button on:click={sayHello}>Greet Me</button>

Clicking the button pops up an alert box showing the greeting text. The colon between on and click tells Svelte which type of event to listen for.

Event Flow Diagram

Visitor Action                Svelte Listener            Result
----------------              -------------------         ----------------
Clicks the button    ---->    on:click fires       ---->  sayHello() runs

Common Event Types

Svelte supports every standard browser event, since it builds directly on native event handling rather than inventing a new system.

on:click fires when a visitor clicks an element
on:input fires when a visitor types inside a text field
on:submit fires when a visitor submits a form
on:mouseover fires when a visitor moves the mouse pointer over an element
on:keydown fires when a visitor presses a key on the keyboard

Reading Event Details

A function connected to an event can accept an event object as a parameter. This object carries useful details about what happened.

<script>
  let typedText = "";

  function handleInput(event) {
    typedText = event.target.value;
  }
</script>

<input on:input={handleInput} />
<p>You typed: {typedText}</p>

Every keystroke inside the input box fires the on:input event, and the paragraph below updates to show the current text instantly.

Inline Event Handlers

Small actions can skip a separate named function and use an inline expression directly inside the event attribute.

<script>
  let count = 0;
</script>

<button on:click={() => count = count + 1}>Add One</button>
<p>Count: {count}</p>

This pattern works well for short actions but a separate named function reads more clearly once the logic grows longer.

Event Modifiers

A modifier changes how an event listener behaves, attached after the event name using a pipe character.

<button on:click|once={sayHello}>Click Only Works Once</button>

The once modifier tells Svelte to run the listener only for the very first click and ignore every click after that.

A Layman Analogy

Think of an event listener as a doorbell wired to a specific action. Pressing the doorbell button, which represents the click, triggers a chime inside the house, which represents your function running. The doorbell stays silent until someone actually presses it.

Preventing Default Browser Behavior

Some events carry a built-in browser action, such as a form submission reloading the page. The preventDefault modifier stops this built-in action, letting your own function handle the event instead.

<form on:submit|preventDefault={handleSubmit}>
  <input type="text" />
  <button type="submit">Send</button>
</form>

Submitting this form runs handleSubmit without the page reloading, since the preventDefault modifier blocks the browser's default reload behavior tied to form submissions.

Listening For Keyboard Events

A keydown listener detects when a visitor presses a specific key, useful for shortcuts like submitting a form after pressing Enter.

<script>
  function handleKey(event) {
    if (event.key === "Enter") {
      alert("Enter was pressed");
    }
  }
</script>

<input on:keydown={handleKey} />

Key Points

The on:eventname syntax attaches a listener to an element
Svelte supports every native browser event type
A connected function can read details from the event object
Modifiers change listener behavior, such as running only once

Previous lesson

Back to course

Next lesson