Event forwarding in Svelte - Step-by-Step Execution

Concept Flow - Event forwarding

Child component emits event

↓

Parent component listens for child's event

↓

Parent forwards event to its own listeners

↓

Grandparent or external component receives event

↓

Event handled at higher level

Event forwarding lets a parent component pass child events up to its own listeners, so outer components can react.

Execution Sample

Svelte

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
</script>
<button on:click={() => dispatch('sayHi')}>Say Hi</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>
<Child on:sayHi />

<!-- App.svelte -->
<script>
  import Parent from './Parent.svelte';
  function handleHi() {
    alert('Hi received!');
  }
</script>
<Parent on:sayHi={handleHi} />

Child emits 'sayHi' event, Parent forwards it, App handles it.

Execution Table

Step	Action	Component	Event	Forwarded?	Listener Triggered
1	User clicks button	Child	sayHi	No	No
2	Child dispatches 'sayHi'	Child	sayHi	No	No
3	Parent receives 'sayHi'	Parent	sayHi	No	No
4	Parent forwards 'sayHi' event	Parent	sayHi	Yes	No
5	App receives forwarded 'sayHi'	App	sayHi	N/A	Yes
6	App's handleHi function runs	App	sayHi	N/A	Yes

💡 Event handled by App, no further forwarding.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	After Step 5	Final
eventEmitted	false	false	true	true	true	true	true
eventForwarded	false	false	false	false	true	N/A	N/A
listenerTriggered	false	false	false	false	false	true	true

Key Moments - 3 Insights

Why doesn't the Parent component handle the event itself?

Because the Parent only forwards the event without adding its own listener, so it passes the event up without handling it (see execution_table steps 3 and 4).

How does the event reach the App component?

The Parent forwards the child's event, so the App listening on Parent receives the event as if Parent emitted it (see execution_table steps 4 and 5).

What happens if the Parent does not forward the event?

The App would never receive the event because it only listens on Parent, and Parent wouldn't pass the child's event up.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the Parent forward the event?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Check the 'Forwarded?' column to see when Parent forwards the event.

According to variable_tracker, when does listenerTriggered become true?

A After Step 5

B After Step 2

C After Step 4

D After Step 3

💡 Hint

Look at the listenerTriggered row and see when it changes to true.

If the Parent did not forward the event, what would happen in the execution table?

A App would still receive the event at Step 5

B Parent would handle the event instead

C Event would stop at Parent and not reach App

D Child would not emit the event

💡 Hint

Refer to key_moments about event forwarding necessity.

Concept Snapshot

Event forwarding in Svelte:
- Child emits event with dispatch
- Parent listens on child event
- Parent forwards event with on:event
- Outer components listen on Parent
- Enables clean event passing up the tree

Full Transcript

In Svelte, event forwarding lets a parent component pass events from its child up to its own listeners. When the child emits an event, the parent can forward it by adding on:event on the child tag. This way, components higher up can listen to events without the parent handling them directly. The execution trace shows the child emitting 'sayHi', the parent forwarding it, and the app component finally handling it. Variables track when the event is emitted, forwarded, and handled. Key moments clarify that forwarding is necessary for the event to reach outer components. The quiz tests understanding of when forwarding happens and its effect.

Practice

1. What does event forwarding in Svelte primarily help with?

easy

A. Passing events from a child component to its parent component easily

B. Automatically styling components based on events

C. Preventing events from bubbling up the DOM tree

D. Creating new custom events inside a component

Solution

1. Step 1: Understand event forwarding concept

   Event forwarding allows a child component to send events directly to its parent without extra code inside the child.

2. Step 2: Identify the main purpose

   This simplifies communication by letting the parent listen to child events as if they came from the parent itself.

3. Final Answer:

   Passing events from a child component to its parent component easily -> Option A

4. Quick Check:

   Event forwarding = passing events up [OK]

Hint: Event forwarding means child events reach parent directly [OK]

Common Mistakes:

• Thinking it styles components
• Confusing with event stopping
• Assuming it creates new events

2. Which syntax correctly forwards a click event from a child component <Child /> to its parent in Svelte?

easy

A. <Child forward:click />

B. <Child bind:click />

C. <Child on:click />

D. <Child use:click />

Solution

1. Step 1: Recall event forwarding syntax

   In Svelte, forwarding an event means listening on the child component tag with on:eventName.

2. Step 2: Match correct syntax

   The correct syntax to listen and forward a click event is <Child on:click />. Other options are invalid or unrelated.

3. Final Answer:

   <Child on:click /> -> Option C

4. Quick Check:

   Use on:eventName to forward events [OK]

Hint: Use on:eventName on child tag to forward events [OK]

Common Mistakes:

• Using bind:click which is for two-way binding
• Using forward:click which is not valid syntax
• Using use:click which is for actions

3. Given this Svelte code:

<!-- Parent.svelte -->
<Child on:customEvent={handleEvent} />

<script>
  function handleEvent(e) {
    console.log(e.detail);
  }
</script>

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function send() {
    dispatch('customEvent', 'hello');
  }
</script>

<button on:click={send}>Send</button>

What will be logged when the button is clicked?

medium

A. undefined

B. Nothing is logged

C. An error occurs

D. "hello"

Solution

1. Step 1: Understand event dispatching in Child

   The child dispatches a 'customEvent' with detail 'hello' when the button is clicked.

2. Step 2: Check event forwarding and handling in Parent

   The parent listens to on:customEvent on the child and calls handleEvent, which logs e.detail.

3. Final Answer:

   "hello" -> Option D

4. Quick Check:

   Dispatched event detail logs "hello" [OK]

Hint: Dispatched event detail appears in handler e.detail [OK]

Common Mistakes:

• Expecting event object instead of detail
• Thinking event is not forwarded automatically
• Assuming no log happens without explicit forwarding

4. What is wrong with this Svelte code if the parent does not receive the child's submit event?

<!-- Parent.svelte -->
<Child on:submit={handleSubmit} />

<script>
  function handleSubmit() {
    alert('Submitted');
  }
</script>

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function submit() {
    dispatch('submit');
  }
</script>

<button on:click={submit}>Submit</button>

medium

A. The parent must use bind:submit instead of on:submit

B. The child event name 'submit' conflicts with native DOM event and needs renaming

C. The dispatch function is not called correctly

D. The parent forgot to import Child component

Solution

1. Step 1: Identify event name conflict

   The child dispatches an event named 'submit', which is a native DOM event on buttons and forms.

2. Step 2: Understand event forwarding conflict

   Because 'submit' is native, the parent's on:submit may listen to the native event, not the child's custom event, causing confusion.

3. Final Answer:

   The child event name 'submit' conflicts with native DOM event and needs renaming -> Option B

4. Quick Check:

   Custom event name conflicts cause forwarding issues [OK]

Hint: Avoid native event names for custom events [OK]

Common Mistakes:

• Assuming dispatch is incorrect
• Thinking parent must bind instead of on
• Ignoring native event name conflicts

5. You have a nested component structure: Grandparent > Parent > Child. The Child dispatches a save event. How can you forward this event so the Grandparent can listen to it directly without adding handlers in Parent?

hard

A. In Parent, listen to save and re-dispatch it with createEventDispatcher

B. In Parent, forward the save event by adding <Child on:save /> and export let $$restProps with <slot {...$$restProps} />

C. In Grandparent, import Child directly and listen to save

D. In Child, dispatch save with option

Solution

1. Step 1: Understand event forwarding through intermediate components

   Events do not automatically bubble through multiple Svelte components; Parent must forward Child's event.

2. Step 2: Forward event in Parent by listening and re-dispatching

   Parent listens to save on Child and uses createEventDispatcher to dispatch the same event upward.

3. Final Answer:

   In Parent, listen to save and re-dispatch it with createEventDispatcher -> Option A

4. Quick Check:

   Intermediate component must re-dispatch events [OK]

Hint: Intermediate must re-dispatch events to forward [OK]

Common Mistakes:

• Assuming events bubble automatically through components
• Trying to listen in grandparent without parent forwarding
• Misusing slot props for event forwarding