JavaScript Tutorial
Events connect user actions with JavaScript logic. Reliable event handling is key to interactive applications.
Why this matters
Poor event handling causes duplicate listeners, memory leaks, and difficult-to-debug UI behavior.
Use addEventListener for modular event registration and cleaner separation of concerns.
Event object provides details like target, key, clientX, preventDefault, and stopPropagation.
Always remove listeners when required in long-lived components to avoid leaks.
Events bubble from child to parent unless propagation is stopped.
Delegation attaches one listener to parent and handles child interactions efficiently.
Delegation is useful for dynamic lists where child nodes are added/removed at runtime.
const btn = document.querySelector("#saveBtn");
btn?.addEventListener("click", (event) => {
console.log("Clicked:", event.type);
});Core listener setup for interaction handling.
const form = document.querySelector("#signupForm");
form?.addEventListener("submit", (e) => {
e.preventDefault();
console.log("Form validation and submit logic here");
});prevents full page reload for custom submit flow.
const list = document.querySelector("#todoList");
list?.addEventListener("click", (e) => {
const target = e.target as HTMLElement;
if (target.matches("button.remove")) {
target.closest("li")?.remove();
}
});Single parent listener handles all current/future child buttons.
Use delegation or ensure listener registration happens once.
Understand bubbling/capturing and stop propagation only when needed.
Remove listeners during teardown to avoid memory and behavior issues.
It is event propagation from target element up through parent elements.
Use it for large or dynamic lists to reduce listeners and improve performance.
preventDefault blocks default browser action; stopPropagation blocks event travel in DOM.
Yes, and they execute in registration order unless removed.