Custom Events
Create and dispatch your own events.
Custom Events is a free JavaScript Academy lesson on CoddyKit — lesson 4 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 JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Beyond Built-In Events
The DOM lets you create and dispatch your own events with CustomEvent. This decouples parts of your app: one component announces something happened, others listen without a direct reference.
Creating a CustomEvent
Construct one with new CustomEvent(name, options). The name is any string you choose.
const evt = new CustomEvent("cart:add");
console.log(evt.type); // "cart:add"Dispatching It
Fire the event on a target with dispatchEvent. Any listener registered for that name on the target (or an ancestor, if it bubbles) runs.
element.dispatchEvent(new CustomEvent("cart:add"));Listening For It
Listen exactly like a native event using addEventListener with your custom name.
element.addEventListener("cart:add", () => {
console.log("Something was added to the cart");
});Passing Data With detail
Attach a payload via the detail property. Listeners read it from event.detail.
const evt = new CustomEvent("cart:add", {
detail: { id: 42, qty: 2 }
});
element.dispatchEvent(evt);Reading the Payload
Inside the listener, event.detail holds whatever you passed. It can be any value: object, array, string, or number.
element.addEventListener("cart:add", (e) => {
console.log(e.detail.id, e.detail.qty); // 42 2
});Making It Bubble
By default custom events do NOT bubble. Set bubbles: true so ancestors and delegated listeners can hear it.
const evt = new CustomEvent("cart:add", {
bubbles: true,
detail: { id: 42 }
});
child.dispatchEvent(evt); // parents can now listenThe cancelable Option
Set cancelable: true to allow listeners to call preventDefault(). The dispatcher checks the return value of dispatchEvent to see if it was canceled.
const evt = new CustomEvent("form:submit", { cancelable: true });
const proceed = form.dispatchEvent(evt);
if (proceed) actuallySubmit();A Decoupling Pattern
Custom events let modules communicate without importing each other. A logger or analytics layer can listen on document for app-wide events.
document.addEventListener("user:login", (e) => {
analytics.track("login", e.detail.userId);
});
document.dispatchEvent(
new CustomEvent("user:login", { detail: { userId: 7 } })
);Naming Conventions
Namespace your event names (like cart:add, user:login) to avoid collisions with native events and to group related events clearly.
Old vs New Syntax
You may see the legacy document.createEvent API in older code. Prefer the modern new CustomEvent(...) constructor; it is simpler and the only form you should write today.
const evt = new CustomEvent("ready", { detail: 1 });Quick Check
Custom events knowledge check.
Recap
Use new CustomEvent(name, { detail, bubbles, cancelable }) and dispatchEvent to create your own events. Read the payload via event.detail, opt into bubbling for delegation, and use cancelable for preventable actions. Custom events decouple components into a clean publish-subscribe style.
Frequently asked questions
Is the “Custom Events” lesson free?
Yes — the full text of “Custom Events” is free to read here on the web, and the JavaScript 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 JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Custom Events”?
Create and dispatch your own events. You practise JavaScript 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 JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Custom Events” 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 JavaScript Academy lesson?
Yes. Every JavaScript 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.