Action with event dispatching in Svelte - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Svelte action?

A Svelte action is a reusable function that can be applied to HTML elements to add behavior or side effects when the element is created or updated.

intermediate

How do you dispatch a custom event from a Svelte action?

You create a new CustomEvent and use the element's dispatchEvent method to send it, allowing parent components to listen and react.

intermediate

Why use event dispatching inside a Svelte action?

Event dispatching lets the action communicate with the component or other parts of the app, sending information like user interactions or state changes.

advanced

Show the basic structure of a Svelte action that dispatches a 'custom' event.

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

beginner

How do you listen to a custom event dispatched by an action in a Svelte component?

Use the on:event syntax on the element where the action is applied, for example: <div use:myAction on:custom={handler}>.

What parameter does a Svelte action function receive?

A The component's props

B The component instance

C The event object

D The HTML element node it is applied to

A Svelte action receives the HTML element node it is attached to as its first parameter.

How do you remove event listeners in a Svelte action?

A By returning a destroy function from the action

B By calling removeEventListener outside the action

C By using the onDestroy lifecycle function

D By setting the event listener to null

Returning a destroy function from the action allows cleanup like removing event listeners when the element is removed.

Which method sends a custom event from an element in Svelte?

A dispatchEvent(new CustomEvent('eventName'))

B emit('eventName')

C trigger('eventName')

D sendEvent('eventName')

The standard way is to call dispatchEvent with a new CustomEvent on the element.

How do you apply an action named 'myAction' to a div in Svelte?

A <div on:myAction></div>

B <div action={myAction}></div>

C <div use:myAction></div>

D <div bind:myAction></div>

The correct syntax to apply an action is use:actionName on the element.

What is the purpose of dispatching events from actions?

A To style the element

B To communicate from the action to the component

C To fetch data from the server

D To change the component's props directly

Dispatching events allows the action to send messages or data back to the component or other listeners.

Explain how to create a Svelte action that dispatches a custom event when the user clicks the element.

Think about how to listen to clicks and send events from the element.

Describe how a Svelte component listens to and handles a custom event dispatched by an action.

Remember how events bubble and how Svelte binds event listeners.