Event forwarding in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a forwarded event is triggered?

Consider a Svelte component Child.svelte that forwards a click event to its parent. What will the parent component receive when the child is clicked?

Svelte

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function handleClick() {
    dispatch('click');
  }
</script>
<button on:click={handleClick}>Click me</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  function onChildClick() {
    alert('Child clicked!');
  }
</script>
<Child on:click={onChildClick} />

A The parent receives the click event and runs onChildClick, showing an alert.

B The parent does not receive any event because events do not bubble in Svelte.

C The child component's click event is blocked and does not trigger any handler.

D The parent receives a custom event named 'handleClick' instead of 'click'.

💡 Hint

Think about how createEventDispatcher works and how events are forwarded in Svelte.

Using createEventDispatcher in the child component allows it to send a custom event named 'click' that the parent can listen to. When the child button is clicked, the parent receives the event and runs the handler.

📝 Syntax

intermediate

Which syntax correctly forwards all events from a child component?

You want a Svelte child component to forward all events it receives to its parent. Which syntax achieves this?

Svelte

<!-- Child.svelte -->
<script>
  // Forward all events
</script>
<div>Content</div>

A <svelte:options forwardEvents />

B <svelte:options accessors={true} />

C <svelte:options tag="forward" />

D <svelte:options accessors={false} />

💡 Hint

Look for the special Svelte tag that controls event forwarding.

The <svelte:options forwardEvents /> directive tells Svelte to forward all events from the child component to its parent automatically.

🔧 Debug

advanced

Why does the parent not receive the forwarded event?

Given this child component code, the parent does not receive the custom event. What is the cause?

Svelte

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function sendEvent() {
    dispatch('custom');
  }
</script>
<button on:click={sendEvent}>Send</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
</script>
<Child on:custom={() => alert('Received')} />

A The parent must listen to 'click' instead of 'custom' to receive the event.

B The event name 'custom' is reserved and cannot be forwarded.

C The child component does not forward the event because <code>&lt;svelte:options forwardEvents /&gt;</code> is missing.

D The child component's dispatch function is not imported correctly.

💡 Hint

Check if the child component is set to forward events automatically.

Without <svelte:options forwardEvents />, the child component's events are not forwarded automatically. The parent won't receive the 'custom' event unless it is forwarded explicitly.

❓ state_output

advanced

What is the output when forwarding a custom event with detail?

In Svelte, a child component dispatches a custom event with detail data. What will the parent receive?

Svelte

<!-- Child.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  function sendData() {
    dispatch('update', { detail: { count: 5 } });
  }
</script>
<button on:click={sendData}>Send</button>

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let receivedCount = 0;
  function handleUpdate(event) {
    receivedCount = event.detail.count;
  }
</script>
<Child on:update={handleUpdate} />
<p>{receivedCount}</p>

A The code throws a runtime error because 'detail' is undefined.

B The paragraph remains '0' because detail is not forwarded.

C The paragraph shows '[object Object]' instead of a number.

D The paragraph shows '5' after clicking the button.

💡 Hint

Remember how event details are accessed in Svelte event handlers.

The dispatched event includes a detail object with count: 5. The parent handler reads event.detail.count and updates the variable, which updates the paragraph.

🧠 Conceptual

expert

Why use event forwarding instead of direct prop callbacks in Svelte?

Which reason best explains why event forwarding is preferred over passing callback functions as props for child-to-parent communication in Svelte?

A Passing callbacks as props is not supported in Svelte and causes syntax errors.

B Event forwarding allows decoupling components and supports native event handling patterns, improving reusability and accessibility.

C Event forwarding automatically serializes data, while callbacks do not work with complex objects.

D Using callbacks requires extra libraries, but event forwarding is built-in.

💡 Hint

Think about component design and how events relate to accessibility and reusability.

Event forwarding follows native event patterns, making components more modular and easier to maintain. It also supports accessibility features like keyboard navigation and ARIA roles better than passing callbacks as props.

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