Event forwarding in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to forward the click event from the child component.

Svelte

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

  function handleClick(event) {
    dispatch('[1]', event);
  }
</script>

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

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

Asubmit

Binput

Cchange

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different event name like 'submit' or 'change' will not forward the click event correctly.

The child component forwards the click event by dispatching it with the same name.

2fill in blank

medium

Complete the parent component code to listen to the forwarded event.

Svelte

<script>
  import Child from './Child.svelte';

  function onChildClick(event) {
    alert('Child clicked!');
  }
</script>

<Child [1]={onChildClick} />

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

Abind:click

Bon:click

Cuse:click

DonClick

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bind:click' or 'use:click' which are not for event listening.

Using camelCase like 'onClick' which is not valid in Svelte.

In Svelte, to listen to an event, use on:eventname syntax. Here, on:click listens to the forwarded click event.

3fill in blank

hard

Fix the error in the child component to forward a custom event named 'select'.

Svelte

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

  function handleSelect() {
    dispatch([1], { id: 1 });
  }
</script>

<button on:click={handleSelect}>Select</button>

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

A"select"

Bselect

C'select'

Dselect()

Attempts:

3 left

💡 Hint

Common Mistakes

Not using quotes around the event name string.

Trying to call the event name as a function.

The event name must be a string. Using quotes like 'select' is correct.

4fill in blank

hard

Fill both blanks to forward a 'submit' event with the original event object.

Svelte

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

  function handleSubmit(event) {
    dispatch([1], [2]);
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <button type="submit">Submit</button>
</form>

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

A'submit'

Bevent

Cevent.target

D'click'

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the wrong event name string.

Passing event.target instead of the whole event.

The event name is 'submit' as a string, and the original event object is passed as the second argument.

5fill in blank

hard

Fill all three blanks to forward a custom event with a detail object containing 'id' and 'name'.

Svelte

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

  function sendData() {
    dispatch([1], { [2]: 42, [3]: 'Alice' });
  }
</script>

<button on:click={sendData}>Send Data</button>

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

A'data'

Bid

Cname

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect event name strings.

Using wrong keys in the detail object.

The event name is 'data'. The detail object has keys 'id' and 'name' with values 42 and 'Alice'.