Action with event dispatching in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the event dispatcher from Svelte.

Svelte

import { [1] } from 'svelte';

Drag options to blanks, or click blank then click option'

AcreateEventDispatcher

BuseEvent

CdispatchEvent

DeventDispatcher

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong import name like 'dispatchEvent' which is a DOM method.

Trying to import something not exported by Svelte.

The createEventDispatcher function is imported from Svelte to create a dispatcher for custom events.

2fill in blank

medium

Complete the code to create the event dispatcher inside the action function.

Svelte

function myAction(node) {
  const dispatch = [1]();
  // action logic
}

Drag options to blanks, or click blank then click option'

AdispatchEvent

BcreateEventDispatcher

CcreateEventDispatcher()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses twice like 'createEventDispatcher()()'.

Using 'dispatchEvent' which is not the Svelte dispatcher.

You call createEventDispatcher (without parentheses here) to get the dispatcher function inside the action.

3fill in blank

hard

Fix the error in dispatching a custom event named 'custom' with detail data.

Svelte

dispatch('[1]', { detail: { message: 'Hello' } });

Drag options to blanks, or click blank then click option'

Aevent

Bdispatch

Ccustom

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name instead of the event name string.

Passing the detail object as the first argument.

The event name should be a string that matches the custom event you want to dispatch, here 'custom'.

4fill in blank

hard

Fill both blanks to dispatch an event named 'update' with a payload containing count.

Svelte

dispatch([1], { [2]: count });

Drag options to blanks, or click blank then click option'

A'update'

Bdetail

Ccount

D'count'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the payload directly without wrapping in 'detail'.

Using count as the event name.

The event name is 'update' as a string, and the payload must be inside a detail object.

5fill in blank

hard

Fill all three blanks to create an action that dispatches 'change' event with newValue when the node is clicked.

Svelte

function changeAction(node) {
  const dispatch = [1]();
  node.addEventListener('click', () => {
    dispatch([2], { [3]: newValue });
  });
  return {
    destroy() {
      node.removeEventListener('click', () => {});
    }
  };
}

Drag options to blanks, or click blank then click option'

AcreateEventDispatcher

B'change'

Cdetail

DdispatchEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'dispatchEvent' instead of 'createEventDispatcher'.

Not wrapping the payload in 'detail'.

Forgetting to remove the event listener properly.

First, create the dispatcher with createEventDispatcher. Then dispatch the 'change' event with the payload inside detail.