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.

Practice

1. What is the main purpose of an action in Svelte?

easy

A. To create new components

B. To add reusable behavior to HTML elements

C. To style elements with CSS

D. To manage global state

Solution

1. Step 1: Understand what actions do

   Actions in Svelte are functions that add behavior to elements, like event listeners or animations.

2. Step 2: Compare options

   Only To add reusable behavior to HTML elements correctly describes adding reusable behavior to elements, while others describe unrelated tasks.

3. Final Answer:

   To add reusable behavior to HTML elements -> Option B

4. Quick Check:

   Actions = reusable element behavior [OK]

Hint: Actions add behavior to elements, not create components [OK]

Common Mistakes:

• Confusing actions with components
• Thinking actions manage styles
• Assuming actions handle global state

2. Which of the following is the correct way to dispatch a custom event named notify from a Svelte action?

easy

A. new Event('notify').dispatch(node)

B. dispatch('notify')

C. dispatchEvent('notify')

D. node.dispatchEvent(new CustomEvent('notify'))

Solution

1. Step 1: Recall how to dispatch events in Svelte actions

   Custom events are dispatched using node.dispatchEvent(new CustomEvent('eventName')).

2. Step 2: Check each option

   node.dispatchEvent(new CustomEvent('notify')) matches the correct syntax. Others are either missing new CustomEvent or use invalid syntax.

3. Final Answer:

   node.dispatchEvent(new CustomEvent('notify')) -> Option D

4. Quick Check:

   Dispatch custom event = node.dispatchEvent(new CustomEvent()) [OK]

Hint: Use node.dispatchEvent with new CustomEvent('name') [OK]

Common Mistakes:

• Omitting 'new CustomEvent'
• Calling dispatchEvent without node
• Using incorrect method names

3. Given this Svelte action code, what will be logged when the button is clicked?

function clickAction(node) {
  const handleClick = () => {
    node.dispatchEvent(new CustomEvent('customClick', { detail: 'clicked' }));
  };
  node.addEventListener('click', handleClick);
  return {
    destroy() {
      node.removeEventListener('click', handleClick);
    }
  };
}

<button use:clickAction on:customClick={e => console.log(e.detail)}>Click me</button>

medium

A. 'clicked' will be logged to the console

B. Nothing will be logged

C. An error will occur because 'customClick' is invalid

D. 'click' will be logged instead of 'clicked'

Solution

1. Step 1: Understand the action's event dispatch

   The action dispatches a 'customClick' event with detail 'clicked' when the button is clicked.

2. Step 2: Check the event listener on the button

   The button listens for 'customClick' and logs the event's detail, which is 'clicked'.

3. Final Answer:

   'clicked' will be logged to the console -> Option A

4. Quick Check:

   Custom event detail logged = 'clicked' [OK]

Hint: Custom event detail is logged on event listener [OK]

Common Mistakes:

• Expecting default 'click' event detail
• Thinking event name must be 'click'
• Ignoring event detail property

4. Identify the error in this Svelte action code that dispatches a custom event:

function myAction(node) {
  const onClick = () => {
    node.dispatchEvent(CustomEvent('myEvent'));
  };
  node.addEventListener('click', onClick);
  return {
    destroy() {
      node.removeEventListener('click', onClick);
    }
  };
}

medium

A. destroy method is missing

B. Event listener is added to the wrong node

C. Missing 'new' keyword before CustomEvent

D. Custom event name must be lowercase

Solution

1. Step 1: Check how CustomEvent is created

   The code calls CustomEvent('myEvent') without the new keyword, which is required to create an event instance.

2. Step 2: Verify other parts

   Event listener is correctly added and removed; destroy method exists; event names can be uppercase.

3. Final Answer:

   Missing 'new' keyword before CustomEvent -> Option C

4. Quick Check:

   CustomEvent requires 'new' keyword [OK]

Hint: Always use 'new CustomEvent' to create events [OK]

Common Mistakes:

• Forgetting 'new' before CustomEvent
• Removing event listener incorrectly
• Assuming event names must be lowercase

5. You want to create a Svelte action that dispatches a custom event resize whenever the window is resized. Which of the following is the best way to implement this action?

hard

A. Add a window 'resize' listener inside the action, dispatch 'resize' event from the node, and clean up in destroy

B. Add a 'resize' listener to the node element directly and dispatch event from node

C. Dispatch 'resize' event once when the action is initialized

D. Use a setInterval to check window size and dispatch event repeatedly

Solution

1. Step 1: Understand event source and dispatch

   Window resize events come from the window object, so the listener must be added to window, not the node.

2. Step 2: Implement dispatch and cleanup

   The action should dispatch a custom 'resize' event from the node when window resizes, and remove the listener in destroy to avoid leaks.

3. Final Answer:

   Add a window 'resize' listener inside the action, dispatch 'resize' event from the node, and clean up in destroy -> Option A

4. Quick Check:

   Listen on window, dispatch from node, cleanup in destroy [OK]

Hint: Listen on window, dispatch from node, cleanup in destroy [OK]

Common Mistakes:

• Adding listener to node instead of window
• Not cleaning up event listener
• Dispatching event only once