Component events (createEventDispatcher) 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'

AonMount

BcreateEventDispatcher

CafterUpdate

Dtick

Attempts:

3 left

💡 Hint

Common Mistakes

Importing lifecycle functions like onMount instead of createEventDispatcher.

Forgetting to import anything.

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

2fill in blank

medium

Complete the code to create the dispatcher inside the component.

Svelte

const [1] = createEventDispatcher();

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

AsendEvent

BdispatchEvent

Cdispatch

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using names like emit or sendEvent which are not standard in Svelte.

Using dispatchEvent which is a DOM method, not the dispatcher variable.

The variable dispatch is commonly used to hold the dispatcher returned by createEventDispatcher().

3fill in blank

hard

Fix the error in the code to dispatch a 'save' event with data.

Svelte

dispatch('[1]', { id: 1, name: 'Test' });

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

Asave

Bsubmit

ConSave

DsaveEvent

Attempts:

3 left

💡 Hint

Common Mistakes

Using event names with prefixes like 'on' which are used in handlers, not dispatching.

Using unrelated event names.

The event name should be a simple string like 'save' to identify the event.

4fill in blank

hard

Fill both blanks to dispatch a 'change' event with a value and listen to it in the parent.

Svelte

<ChildComponent on:[1]={ [2] } />

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

Achange

BhandleChange

Cclick

DonChange

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'onChange' as event name in Svelte, which is incorrect syntax.

Using unrelated event names like 'click'.

The child dispatches a 'change' event, and the parent listens with on:change calling handleChange.

5fill in blank

hard

Fill all three blanks to create a dispatcher, dispatch a 'submit' event with form data, and listen in the parent.

Svelte

<script>
  const [1] = createEventDispatcher();
  function submitForm() {
    [1]('[2]', { user: 'Alice' });
  }
</script>

<!-- Parent usage: <ChildComponent on:[2]={handleSubmit} /> -->

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

Adispatch

Bsubmit

Demit

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names for dispatcher and calling it inconsistently.

Using wrong event names or handler names.

Use dispatch to create the dispatcher, dispatch the 'submit' event, and listen with on:submit in the parent.

Practice

1. What is the main purpose of createEventDispatcher in a Svelte component?

easy

A. To manage component state internally

B. To create a new component dynamically

C. To send custom events from a child component to its parent

D. To style components with CSS variables

Solution

1. Step 1: Understand the role of createEventDispatcher

   This function is used to create a dispatcher that sends events from child to parent components.

2. Step 2: Identify the correct purpose

   Among the options, only sending custom events matches the purpose of createEventDispatcher.

3. Final Answer:

   To send custom events from a child component to its parent -> Option C

4. Quick Check:

   createEventDispatcher sends events to parent [OK]

Hint: Remember: dispatch sends events upward to parent [OK]

Common Mistakes:

• Confusing event dispatch with state management
• Thinking it creates components
• Assuming it styles components

2. Which of the following is the correct way to import and use createEventDispatcher in a Svelte component?

easy

A. import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher();

B. import createEventDispatcher from 'svelte'; const dispatch = createEventDispatcher();

C. import { createEventDispatcher } from 'svelte/internal'; const dispatch = createEventDispatcher();

D. import { dispatchEvent } from 'svelte'; const dispatch = dispatchEvent();

Solution

1. Step 1: Check the import source

   The correct import is from 'svelte' using named import syntax.

2. Step 2: Confirm usage

   Calling createEventDispatcher() returns the dispatch function to send events.

3. Final Answer:

   import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); -> Option A

4. Quick Check:

   Correct import and call syntax = import { createEventDispatcher } from 'svelte'; const dispatch = createEventDispatcher(); [OK]

Hint: Always import from 'svelte' with curly braces [OK]

Common Mistakes:

• Importing from 'svelte/internal' which is private
• Using default import instead of named import
• Confusing dispatchEvent with createEventDispatcher

3. Given this Svelte child component code:

import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();

function sendData() {
  dispatch('update', { value: 42 });
}

What will the parent component receive when listening with on:update?

medium

A. An event with event.detail containing { value: 42 }

B. An event with event.value equal to 42

C. A string 'update' without data

D. No event is sent because dispatch is not called

Solution

1. Step 1: Understand dispatch call

   The dispatch function sends an event named 'update' with data inside an object as the second argument.

2. Step 2: Recall event data access

   The parent receives the event and accesses data via event.detail, which holds the object { value: 42 }.

3. Final Answer:

   An event with event.detail containing { value: 42 } -> Option A

4. Quick Check:

   Data sent in event.detail = An event with event.detail containing { value: 42 } [OK]

Hint: Event data is always inside event.detail [OK]

Common Mistakes:

• Expecting event.value instead of event.detail
• Thinking dispatch sends only event name string
• Assuming dispatch is not called

4. Identify the error in this Svelte child component code:

import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher;

dispatch('click');

medium

A. dispatch cannot send events without a second argument

B. dispatch should be imported from 'svelte/internal'

C. dispatch must be called inside a function

D. Missing parentheses when calling createEventDispatcher

Solution

1. Step 1: Check createEventDispatcher usage

   The code assigns dispatch to createEventDispatcher without calling it, missing parentheses.

2. Step 2: Understand consequences

   Without calling createEventDispatcher(), dispatch is not a function, so dispatch('click') causes an error.

3. Final Answer:

   Missing parentheses when calling createEventDispatcher -> Option D

4. Quick Check:

   createEventDispatcher() must be called [OK]

Hint: Always call createEventDispatcher() with () [OK]

Common Mistakes:

• Forgetting parentheses after createEventDispatcher
• Importing from wrong module
• Thinking second argument is mandatory

5. You want a child Svelte component to send two different events, save and cancel, each with different data. Which is the best way to implement this using createEventDispatcher?

hard

A. Create two dispatchers by calling createEventDispatcher() twice, one for each event

B. Create one dispatcher and call dispatch('save', data) or dispatch('cancel', data) as needed

C. Use dispatch('save_cancel', {saveData, cancelData}) to send both events at once

D. Send events by calling dispatchEvent directly on the DOM element

Solution

1. Step 1: Understand dispatcher usage

   One dispatcher handles all custom events; you specify event names when calling dispatch.

2. Step 2: Evaluate options

   Calling dispatch with different event names ('save' or 'cancel') is the correct pattern.

3. Final Answer:

   Create one dispatcher and call dispatch('save', data) or dispatch('cancel', data) as needed -> Option B

4. Quick Check:

   Single dispatcher handles multiple events [OK]

Hint: One dispatcher can send many event types by name [OK]

Common Mistakes:

• Creating multiple dispatchers unnecessarily
• Sending combined event instead of separate
• Using DOM dispatchEvent instead of Svelte dispatch