Introduction to Svelte Events

:dart: Learning Objectives

By the end of this lesson, you will be able to:

• Understand what events are in Svelte
• Create event handlers using the on:<event> syntax
• Apply event modifiers to control event behavior
• Implement DOM event forwarding in custom components

:information_source: What are Svelte Events? Events in Svelte are actions that happen when users interact with your website. Just like JavaScript, these events help make your website interactive!

:pushpin: Common Event Examples

Here are some events you'll use often:

• Click: When users click on buttons or links
• Hover: When users move their mouse over an element
• Keydown: When users press a key on their keyboard
• Submit: When users submit a form

:memo: Note Svelte events work with the Document Object Model (DOM). The DOM is like a map of all the elements on your webpage!

:rocket: Creating Event Handlers

You can create event handlers directly in your template using the on:<event> syntax.

Let's start with the most common event - the click event. We handle it using on:click.

App.svelte

<script>
  function clickButton() \{
    alert('You clicked on the button');
  \}
</script>

<button on:click=\{clickButton\}>
  Click me
</button>

How it works:

1. The button has an on:click event handler
2. The handler is connected to the clickButton function
3. When you click the button, the function runs and shows an alert

:bulb: Tip Always give your functions clear names that describe what they do. clickButton tells us exactly when this function will run!

:art: Event Modifiers

Event modifiers help you control how events behave. Think of them as special instructions you can add to your events!

Svelte has eight event modifiers, but let's focus on the two most important ones:

How to Use Event Modifiers

To add a modifier to an event, use the | symbol (vertical bar):

<button on:click|once=\{clickButton\}>Click me</button>

Example: The once Modifier

Let's see how the once modifier prevents multiple clicks:

App.svelte

<script>
  function clickButton() \{
    alert('You clicked on the button');
  \}
</script>

<button on:click|once=\{clickButton\}>
  Click me
</button>

First click:

Second click onwards:

No more alert coming out

Example: The preventDefault Modifier

The preventDefault modifier stops the browser's default behavior. Here's how it works with links:

App.svelte

<script>
  function clickLink() \{
    alert("Hello World");
  \}
</script>

<a href="https://telebort.com" on:click|preventDefault=\{clickLink\}>
  Telebort
</a>

When you click the link:

• :x: You won't go to the Telebort website
• :white_check_mark: The alert "Hello World" will appear instead

:emoji: DOM Event Forwarding

Sometimes you want to create custom components that can handle events. Event forwarding lets your custom components pass events up to their parent components.

Here's how it works:

1. Create a custom component (like CustomButton.svelte)
2. Add the event handler without a function in the custom component
3. Import and use the custom component in your main app
4. Handle the event in the parent component

Let's see this in action:

App.svelte

<script>
  import CustomButton from './CustomButton.svelte';
  
  function clickButton() \{
    alert('You clicked on the button');
  \}
</script>

<CustomButton on:click=\{clickButton\} />

CustomButton.svelte

<button on:click>
  Click me
</button>

<style>
  button \{
    background: orange;
    color: white;
    border-radius: 5px;
    padding: 15px;
  \}
</style>

:memo: Note Notice how on:click in CustomButton.svelte doesn't have a function? That's event forwarding! The event gets passed up to the parent component.

:memo: Summary

Let's review what you've learned about Svelte events:

:white_check_mark: Events make your website interactive by responding to user actions :white_check_mark: Event handlers use the on:<event> syntax (like on:click) :white_check_mark: Event modifiers control how events behave:

• once - runs only one time
• preventDefault - stops default browser behavior :white_check_mark: Event forwarding lets custom components pass events to parent components

:dart: Practice Time!

Try these exercises to master Svelte events:

1. Create a counter button that increases a number each time you click it
2. Add a form with a submit button that uses preventDefault to stop the page from refreshing
3. Build a custom component that forwards a hover event to show a tooltip
4. Challenge: Create a button that can only be clicked 3 times using event modifiers

:bulb: Tip Remember: The best way to learn events is by practicing! Start with simple click events and gradually try more complex interactions.