Events are the bridge between user actions and your code. Every click, keypress, scroll, and form submission is an event. Master event handling and you can build any interactive web application.
Day 17 / 180
Beginner Phase
🕐14 min read
💻7 code examples
🎯3 practice tasks
Right now — as you read this page — events are firing constantly:
🖱️ mousemove — every pixel your mouse moves
📜 scroll — every pixel you scroll
⌨️ keydown — every key you press
👁️ focus — every time you click a field
🔄 resize — every time window size changes
Your browser is an event machine. It fires hundreds of events every second. Your job as a JavaScript developer is to listen for the right ones and respond to them. In Day 16 you learned the basics. Today you go deeper — event objects, bubbling, delegation, and the patterns that professional developers use in every single project.
1. What are Events — Three Ways to Listen
There are three ways to handle events in JavaScript. Only one of them is correct for modern development — and understanding why the others are problematic will save you from many bugs:
JavaScript — Three Ways to Handle Events
// ❌ Way 1 — Inline HTML (avoid)// <button onclick="doSomething()">Click</button>// Mixes HTML and JS — hard to maintain// ❌ Way 2 — DOM property (avoid)const btn = document.querySelector("#btn");
btn.onclick = () => console.log("clicked");
// Only one handler allowed — second one overwrites first
btn.onclick = () => console.log("overwrites!"); // ← first lost// ✅ Way 3 — addEventListener (always use this)
btn.addEventListener("click", () => console.log("first"));
btn.addEventListener("click", () => console.log("second"));
// Both run! ✅ Multiple handlers on same event// Remove event listenerfunctionhandleClick() {
console.log("clicked once!");
btn.removeEventListener("click", handleClick);
}
btn.addEventListener("click", handleClick); // runs only once// once option — auto removes after first trigger
btn.addEventListener("click", () => console.log("once!"), { once: true });
2. The Event Object — Information About What Happened
Every event handler receives an event object automatically. This object contains detailed information about the event — what was clicked, where, what key was pressed, and much more:
JavaScript — Event Object
const btn = document.querySelector("#btn");
btn.addEventListener("click", (event) => {
// Common event properties
console.log(event.type); // "click"
console.log(event.target); // element clicked
console.log(event.currentTarget); // element with listener
console.log(event.timeStamp); // when it happened (ms)// Mouse position
console.log(event.clientX); // X from viewport
console.log(event.clientY); // Y from viewport
console.log(event.pageX); // X from page// Modifier keys held during click
console.log(event.ctrlKey); // was Ctrl held?
console.log(event.shiftKey); // was Shift held?
console.log(event.altKey); // was Alt held?
});
// target vs currentTargetconst card = document.querySelector(".card");
card.addEventListener("click", (e) => {
console.log(e.target); // actual element clicked (could be child)
console.log(e.currentTarget); // always the card (has the listener)
console.log(e.target.id); // id of clicked element
console.log(e.target.tagName); // "BUTTON", "SPAN", etc.
});
3. Mouse Events — All Types
JavaScript fires different events for different mouse interactions. Each one is useful in specific situations — from simple clicks to drag-and-drop interfaces:
Keyboard events let you detect when users press keys. This is used for shortcuts, game controls, form validation, and search-as-you-type features:
JavaScript — Keyboard Events
// keydown — fires when key is pressed
document.addEventListener("keydown", (e) => {
console.log(e.key); // "a", "Enter", "ArrowUp" etc.
console.log(e.code); // "KeyA", "Enter", "ArrowUp"
console.log(e.ctrlKey); // was Ctrl held?
});
// Detect specific keys
document.addEventListener("keydown", (e) => {
if (e.key === "Escape") {
document.querySelector(".modal")?.classList.remove("open");
}
if (e.key === "Enter") {
document.querySelector("#searchBtn")?.click();
}
// Ctrl + S — save shortcutif (e.ctrlKey && e.key === "s") {
e.preventDefault(); // stop browser save dialog
console.log("Saved!");
}
});
// keyup — fires when key is releasedconst input = document.querySelector("#search");
input.addEventListener("keyup", (e) => {
console.log(`Searching: ${e.target.value}`);
});
// input event — fires on every change (best for live search)
input.addEventListener("input", (e) => {
const query = e.target.value.toLowerCase().trim();
console.log(`Live search: ${query}`);
});
5. Form Events — Handling User Input
Forms are the most common source of user data on the web. These events give you full control over form submissions, input validation, and real-time feedback:
JavaScript — Form Events
const form = document.querySelector("#loginForm");
const emailIn = document.querySelector("#email");
const passIn = document.querySelector("#password");
// submit — most important form event
form.addEventListener("submit", (e) => {
e.preventDefault(); // ← ALWAYS prevent page reload!const email = emailIn.value.trim();
const password = passIn.value;
if (!email || !password) {
console.log("Fill all fields!");
return;
}
if (!email.includes("@")) {
console.log("Invalid email!");
return;
}
console.log("Login successful!", { email });
});
// focus / blur — input interaction
emailIn.addEventListener("focus", () => {
emailIn.style.borderColor = "#4f6ef7";
});
emailIn.addEventListener("blur", () => {
emailIn.style.borderColor = "";
if (!emailIn.value.includes("@")) {
console.log("Please enter valid email");
}
});
// change — fires when value changes and loses focusconst select = document.querySelector("select");
select.addEventListener("change", (e) => {
console.log(`Selected: ${e.target.value}`);
});
🔥 Always use preventDefault() on form submit! Without it — the browser reloads the page every time the form is submitted and all your JavaScript state is lost. This is one of the most critical things to remember when working with forms.
6. Event Bubbling & stopPropagation 🔥
When you click an element — the event does not just fire on that element. It bubbles up through all parent elements too. This is called event bubbling and it causes one of the most common and confusing bugs for beginners:
JavaScript — Event Bubbling
/* HTML structure
<div id="outer"> ← fires 3rd
<div id="middle"> ← fires 2nd
<button id="btn"> ← fires 1st
Click me
</button>
</div>
</div>
*/
document.querySelector("#btn").addEventListener("click", () => {
console.log("1. Button clicked");
});
document.querySelector("#middle").addEventListener("click", () => {
console.log("2. Middle div fired too!");
});
document.querySelector("#outer").addEventListener("click", () => {
console.log("3. Outer div fired too!");
});
// Clicking button logs ALL THREE — that is bubbling!// stopPropagation — stop bubbling
document.querySelector("#btn").addEventListener("click", (e) => {
e.stopPropagation(); // stops here — parents won't fire
console.log("Only button fires now");
});
// Real world — close modal when clicking backdropconst modal = document.querySelector(".modal");
modal.addEventListener("click", (e) => {
if (e.target === modal) { // clicked backdrop not content
modal.classList.remove("open");
}
});
7. Event Delegation — The Performance Pattern 🔥
Instead of adding listeners to every child element — add one listener to the parent and use bubbling to your advantage. This is called event delegation and it is one of the most important patterns in professional JavaScript:
JavaScript — Event Delegation
// ❌ Bad — listener on every item (100 items = 100 listeners)
document.querySelectorAll(".item").forEach(item => {
item.addEventListener("click", () => console.log(item.textContent));
});
// ✅ Good — one listener on parent (handles ALL children)const list = document.querySelector("#list");
list.addEventListener("click", (e) => {
if (e.target.classList.contains("item")) {
console.log(`Clicked: ${e.target.textContent}`);
}
});
// Works for dynamically added items too! ✅functionaddItem(text) {
const li = document.createElement("li");
li.className = "item";
li.textContent = text;
list.appendChild(li);
// No need to add listener — parent already handles it ✅
}
// Real world — todo list deleteconst todoList = document.querySelector("#todos");
todoList.addEventListener("click", (e) => {
if (e.target.classList.contains("delete-btn")) {
e.target.closest("li").remove();
}
if (e.target.classList.contains("todo-text")) {
e.target.classList.toggle("done");
}
});
Pro Tip #1 — Event delegation is a must
If you have a list of 100 items and add a click listener to each — you have 100 listeners in memory. One listener on the parent handles all of them. This dramatically improves performance. Use delegation whenever you have multiple similar elements or dynamically added content.
Pro Tip #2 — closest() for nested elements
element.closest(".selector") traverses up the DOM tree to find the nearest matching ancestor. It is the perfect companion to event delegation when your clickable items have nested child elements inside them.
Pro Tip #3 — data attributes for delegation
Use data-action attributes on elements for clean event delegation. Check e.target.dataset.action in one parent listener and handle multiple actions without messy class checks. This pattern scales beautifully in large applications.
8. Try It Yourself — Live Event Playground
Edit the HTML and JavaScript and click Run to see event handling in action!
✏️ Live Event Playground — Day 17
HTML
JAVASCRIPT
LIVE PREVIEW
💡 Edit HTML & JS then click Run!
9. Practice Tasks
Task 1 — Easy: Keyboard Logger
Create a text display area. Listen for keydown events on the document. Show the pressed key in the display. Add special handling — show "ENTER ↵" for Enter key, "SPACE ␣" for Space, "BACKSPACE ⌫" for Backspace. Change background color when Ctrl is held.
Task 2 — Medium: Image Gallery
Create a grid of 6 colored boxes. Use event delegation on the parent. When a box is clicked — show its color name in a display area and add a "selected" border. When another box is clicked — remove the previous selection. Add a mouseover effect using mouseenter and mouseleave.
Task 3 — Hard: Form Validator
Build a complete registration form with name, email, password, and confirm password. Validate in real time using the input event — show green checkmark when valid, red message when invalid. Validate: name minimum 3 chars, email has @ and dot, password minimum 8 chars with one number, confirm password matches. Disable the submit button until all fields are valid. On submit show a success message.
.jpg.png)
