Action with event dispatching in Svelte - Mini Project: Build & Apply

Action with event dispatching in Svelte

📖 Scenario: You are building a simple interactive web page where a button changes color when clicked. You want to use a Svelte action to handle the click event and dispatch a custom event to notify the parent component.

🎯 Goal: Create a Svelte action that changes the button's background color on click and dispatches a custom event called colorChange. Then use this action in a button element and listen for the colorChange event to update a message.

📋 What You'll Learn

Create a Svelte action function named colorChanger that changes the element's background color to lightblue when clicked

Inside the action, dispatch a custom event named colorChange when the color changes

Use the colorChanger action on a <button> element

Listen for the colorChange event on the button and update a message variable to 'Button color changed!'

💡 Why This Matters

🌍 Real World

Custom actions with event dispatching let you add reusable interactive behaviors to elements in Svelte apps, like buttons, inputs, or custom widgets.

💼 Career

Understanding actions and event dispatching is important for building modular, maintainable UI components in modern web development with Svelte.

1

Create the Svelte action function

Create a Svelte action function called colorChanger that takes a parameter node and returns an object with a destroy method. Inside the function, add a click event listener to node that changes its background color to lightblue.

Svelte

// Create the colorChanger action function
// Your code here

Hint

Remember to add and remove the event listener inside the action function.

2

Add event dispatching inside the action

Modify the handleClick function inside the colorChanger action to dispatch a custom event named colorChange after changing the background color. Use node.dispatchEvent(new CustomEvent('colorChange')) to dispatch the event.

Svelte

export function colorChanger(node) {
    function handleClick() {
        node.style.backgroundColor = 'lightblue';
        // Dispatch the colorChange event here
    }
    node.addEventListener('click', handleClick);
    return {
        destroy() {
            node.removeEventListener('click', handleClick);
        }
    };
}

Hint

Use node.dispatchEvent(new CustomEvent('colorChange')) inside the click handler to dispatch the event.

3

Use the action on a button and listen for the event

In the Svelte component, import the colorChanger action. Create a variable message initialized to an empty string. Add a <button> element that uses the use:colorChanger directive. Add an event listener for on:colorChange on the button that sets message to 'Button color changed!'. Below the button, display the message variable inside a <p> tag.

Svelte

import { colorChanger } from './path/to/action';

let message = '';

// Add button with use:colorChanger and on:colorChange
// Your code here

Hint

Use the use: directive to apply the action and on: to listen for the event.

4

Complete the Svelte component with proper imports and usage

Ensure the Svelte component imports colorChanger from the correct file path. Confirm the button uses use:colorChanger and listens for on:colorChange. The component should display the message below the button. The code should be ready to run in a Svelte environment.

Svelte

// Verify imports and usage are correct
// Your code here

Hint

Make sure the import path matches your file structure and the component syntax is correct.