0Pricing
Sveltejs Academy · Lesson

Custom Events with createEventDispatcher

Emit typed custom events from child components for parent to handle.

Custom Events with createEventDispatcher is a free Sveltejs Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Sveltejs Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Why Custom Events

Child components communicate up by dispatching custom events the parent listens for.

Import the Dispatcher

Import createEventDispatcher from svelte and create one inside your script.

<script>
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();
</script>

Dispatch an Event

Call dispatch(name, detail) to emit. Parents listen with on:name.

function save() { dispatch("save", { id: 42 }); }

Listen in Parent

Treat custom events like DOM events.

<Child on:save={(e) => console.log(e.detail.id)} />

Event Detail

The second argument becomes event.detail on the consumer side.

No Bubbling by Default

Custom events do not bubble through Svelte component trees automatically. Forward explicitly if needed.

Typed Events

With TypeScript, you can type the events for autocomplete in parents.

const dispatch = createEventDispatcher<{ save: { id: number } }>();

Cancelable Events

Pass { cancelable: true } as a third argument to allow parents to preventDefault.

Multiple Events

One dispatcher can emit many event types; use unique names per intent.

Avoid Generic Names

Prefer specific names like itemSelected over generic change.

Event vs Callback

Events are good for upward signals; for tight integration consider passing callback props.

Quick Check

How does a parent read event data?

Recap

Use createEventDispatcher to emit named events with a detail payload, and listen with on:eventName.

Frequently asked questions

Is the “Custom Events with createEventDispatcher” lesson free?

Yes — the full text of “Custom Events with createEventDispatcher” is free to read here on the web, and the Sveltejs Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Sveltejs Academy course, upgrade to CoddyKit PRO.

What will I learn in “Custom Events with createEventDispatcher”?

Emit typed custom events from child components for parent to handle. You practise Sveltejs Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Sveltejs Academy?

No prior experience is required. Sveltejs Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Custom Events with createEventDispatcher” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Sveltejs Academy lesson?

Yes. Every Sveltejs Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. on:click on:input on:submit
  2. Event Modifiers: preventDefault stopPropagation once
  3. Custom Events with createEventDispatcher
  4. Forwarding Events with on:click
← Back to Sveltejs Academy