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.