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.