Action with event dispatching in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What event does this Svelte action dispatch?

Consider this Svelte action that dispatches a custom event when the element is clicked.

function clickAction(node) {
  const handleClick = () => {
    node.dispatchEvent(new CustomEvent('customclick', { detail: { clicked: true } }));
  };
  node.addEventListener('click', handleClick);
  return {
    destroy() {
      node.removeEventListener('click', handleClick);
    }
  };
}

Which event name should you listen for in the component using this action?

A clickAction

B customclick

C click

D actionclick

💡 Hint

Look at the event name passed to CustomEvent.

The action dispatches an event named customclick. You must listen for this exact event name.

❓ state_output

intermediate

What is the output after dispatching an event in a Svelte action?

Given this Svelte component using an action that dispatches an event:

<script>
  let message = '';
  function myAction(node) {
    const sendEvent = () => {
      node.dispatchEvent(new CustomEvent('notify', { detail: 'hello' }));
    };
    sendEvent();
    return {};
  }
</script>

<div use:myAction on:notify={e => message = e.detail}>Click me</div>
<p>{message}</p>

What will be shown inside the <p> tag when the component renders?

A undefined

B '' (empty string)

C 'hello'

D Error: event handler not found

💡 Hint

The action dispatches the event immediately on mount.

The action dispatches 'notify' with detail 'hello' immediately, so the handler sets message to 'hello'.

📝 Syntax

advanced

Which Svelte action syntax correctly dispatches a custom event?

Which of the following Svelte action implementations correctly dispatches a custom event named 'update' with detail { value: 42 } when the element is clicked?

A

function action(node) {
  const handler = () => node.dispatchEvent(new CustomEvent('update', { detail: { value: 42 } }));
  node.addEventListener('click', handler);
  return { destroy() { node.removeEventListener('click', handler); } };
}

B

function action(node) {
  node.dispatchEvent(new CustomEvent('update', { detail: { value: 42 } }));
  return {};
}

C

function action(node) {
  node.addEventListener('click', () => {
    node.dispatchEvent('update', { value: 42 });
  });
  return { destroy() { node.removeEventListener('click'); } };
}

D

function action(node) {
  node.addEventListener('click', () => {
    node.dispatchEvent(new CustomEvent('update', { detail: { value: 42 } }));
  });
  return { destroy() { node.removeEventListener('click'); } };
}

💡 Hint

Check that event listeners are properly added and removed, and that CustomEvent is used correctly.

Option A correctly adds and removes the event listener and dispatches a CustomEvent with the right syntax.

🔧 Debug

advanced

Why does this Svelte action's event not trigger the handler?

Given this Svelte action:

function action(node) {
  node.addEventListener('click', () => {
    node.dispatchEvent(new CustomEvent('change', { detail: 123 }));
  });
  return {};
}

And this usage in a component:

<div use:action on:change={e => console.log(e.detail)}>Click me</div>

Clicking the div does not log anything. Why?

A The event 'change' is a native DOM event and cannot be dispatched as a CustomEvent.

B The action does not remove the event listener on destroy, causing a memory leak but not blocking events.

C The event bubbles by default, so the handler should catch it; the problem is elsewhere.

D The event is dispatched on the same node, but the event listener is on the node itself, so it should work; the issue is that the event is not set to bubble.

💡 Hint

Check if the custom event bubbles by default.

Custom events do not bubble by default. The handler on the node won't catch the event unless bubbles: true is set.

🧠 Conceptual

expert

How to correctly forward a custom event from a Svelte action to a component?

You want a Svelte action to dispatch a custom event that the component using the action can listen to with on:customEvent. Which approach ensures the event is properly received by the component?

A Dispatch the event on the node with <code>node.dispatchEvent(new CustomEvent('customEvent'))</code> and ensure the event bubbles by setting <code>bubbles: true</code>.

B Dispatch the event on the document object instead of the node to guarantee the component catches it.

C Use <code>window.dispatchEvent</code> to send the event globally and listen with <code>on:customEvent</code> in the component.

D Dispatch the event on the node without bubbles and listen on the parent element of the component.

💡 Hint

Think about event propagation and where the component listens for events.

Dispatching the event on the node with bubbles: true allows the component to listen with on:customEvent on the element using the action.

Practice

1. What is the main purpose of an action in Svelte?

easy

A. To create new components

B. To add reusable behavior to HTML elements

C. To style elements with CSS

D. To manage global state

Solution

1. Step 1: Understand what actions do

   Actions in Svelte are functions that add behavior to elements, like event listeners or animations.

2. Step 2: Compare options

   Only To add reusable behavior to HTML elements correctly describes adding reusable behavior to elements, while others describe unrelated tasks.

3. Final Answer:

   To add reusable behavior to HTML elements -> Option B

4. Quick Check:

   Actions = reusable element behavior [OK]

Hint: Actions add behavior to elements, not create components [OK]

Common Mistakes:

• Confusing actions with components
• Thinking actions manage styles
• Assuming actions handle global state

2. Which of the following is the correct way to dispatch a custom event named notify from a Svelte action?

easy

A. new Event('notify').dispatch(node)

B. dispatch('notify')

C. dispatchEvent('notify')

D. node.dispatchEvent(new CustomEvent('notify'))

Solution

1. Step 1: Recall how to dispatch events in Svelte actions

   Custom events are dispatched using node.dispatchEvent(new CustomEvent('eventName')).

2. Step 2: Check each option

   node.dispatchEvent(new CustomEvent('notify')) matches the correct syntax. Others are either missing new CustomEvent or use invalid syntax.

3. Final Answer:

   node.dispatchEvent(new CustomEvent('notify')) -> Option D

4. Quick Check:

   Dispatch custom event = node.dispatchEvent(new CustomEvent()) [OK]

Hint: Use node.dispatchEvent with new CustomEvent('name') [OK]

Common Mistakes:

• Omitting 'new CustomEvent'
• Calling dispatchEvent without node
• Using incorrect method names

3. Given this Svelte action code, what will be logged when the button is clicked?

function clickAction(node) {
  const handleClick = () => {
    node.dispatchEvent(new CustomEvent('customClick', { detail: 'clicked' }));
  };
  node.addEventListener('click', handleClick);
  return {
    destroy() {
      node.removeEventListener('click', handleClick);
    }
  };
}

<button use:clickAction on:customClick={e => console.log(e.detail)}>Click me</button>

medium

A. 'clicked' will be logged to the console

B. Nothing will be logged

C. An error will occur because 'customClick' is invalid

D. 'click' will be logged instead of 'clicked'

Solution

1. Step 1: Understand the action's event dispatch

   The action dispatches a 'customClick' event with detail 'clicked' when the button is clicked.

2. Step 2: Check the event listener on the button

   The button listens for 'customClick' and logs the event's detail, which is 'clicked'.

3. Final Answer:

   'clicked' will be logged to the console -> Option A

4. Quick Check:

   Custom event detail logged = 'clicked' [OK]

Hint: Custom event detail is logged on event listener [OK]

Common Mistakes:

• Expecting default 'click' event detail
• Thinking event name must be 'click'
• Ignoring event detail property

4. Identify the error in this Svelte action code that dispatches a custom event:

function myAction(node) {
  const onClick = () => {
    node.dispatchEvent(CustomEvent('myEvent'));
  };
  node.addEventListener('click', onClick);
  return {
    destroy() {
      node.removeEventListener('click', onClick);
    }
  };
}

medium

A. destroy method is missing

B. Event listener is added to the wrong node

C. Missing 'new' keyword before CustomEvent

D. Custom event name must be lowercase

Solution

1. Step 1: Check how CustomEvent is created

   The code calls CustomEvent('myEvent') without the new keyword, which is required to create an event instance.

2. Step 2: Verify other parts

   Event listener is correctly added and removed; destroy method exists; event names can be uppercase.

3. Final Answer:

   Missing 'new' keyword before CustomEvent -> Option C

4. Quick Check:

   CustomEvent requires 'new' keyword [OK]

Hint: Always use 'new CustomEvent' to create events [OK]

Common Mistakes:

• Forgetting 'new' before CustomEvent
• Removing event listener incorrectly
• Assuming event names must be lowercase

5. You want to create a Svelte action that dispatches a custom event resize whenever the window is resized. Which of the following is the best way to implement this action?

hard

A. Add a window 'resize' listener inside the action, dispatch 'resize' event from the node, and clean up in destroy

B. Add a 'resize' listener to the node element directly and dispatch event from node

C. Dispatch 'resize' event once when the action is initialized

D. Use a setInterval to check window size and dispatch event repeatedly

Solution

1. Step 1: Understand event source and dispatch

   Window resize events come from the window object, so the listener must be added to window, not the node.

2. Step 2: Implement dispatch and cleanup

   The action should dispatch a custom 'resize' event from the node when window resizes, and remove the listener in destroy to avoid leaks.

3. Final Answer:

   Add a window 'resize' listener inside the action, dispatch 'resize' event from the node, and clean up in destroy -> Option A

4. Quick Check:

   Listen on window, dispatch from node, cleanup in destroy [OK]

Hint: Listen on window, dispatch from node, cleanup in destroy [OK]

Common Mistakes:

• Adding listener to node instead of window
• Not cleaning up event listener
• Dispatching event only once