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.