JavaScript Event Handling
click, submit, keydown, bubbling, delegation & more
Event Handling in JavaScript
Events are the heartbeat of any interactive web application. Whether you're clicking a button, pressing a key, or submitting a form, events allow JavaScript to respond to user actions. This tutorial takes you from foundational event handling to advanced topics like event bubbling and delegation.
What is an Event?
An event is an action or occurrence that happens in the browser — like a user click, mouse movement, or a keystroke. JavaScript lets you listen to these events and react accordingly.
Basic Event Handling Using HTML Attributes
The simplest way to handle events is by adding event attributes directly in HTML.
<button onclick="alert('Button clicked!')">Click Me</button>
Event Handling with JavaScript (Recommended)
Using JavaScript to attach events is more flexible and maintainable.
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
alert("Button was clicked!");
});
(Button clicked, an alert appears)
Types of Common Events
click– when a user clicks an elementsubmit– when a form is submittedkeydown,keyup– when a key is pressed or releasedmouseover,mouseout– when mouse hovers or leaves an elementchange– when input value changes
Example: Handling a Form Submit Event
<form id="loginForm">
<input type="text" id="username" placeholder="Username" required />
<button type="submit">Login</button>
</form>
document.getElementById("loginForm").addEventListener("submit", function(e) {
e.preventDefault();
const user = document.getElementById("username").value;
alert("Logged in as " + user);
});
Typed "john", clicked login => Alert: Logged in as john
Keyboard Events: keydown vs keyup
<input type="text" id="searchBox" placeholder="Type something..." />
<p id="log"></p>
const input = document.getElementById("searchBox");
const log = document.getElementById("log");
input.addEventListener("keydown", function(e) {
log.textContent = "Key down: " + e.key;
});
Pressing "A" → Key down: a
Mouse Events Example
<div id="hoverBox" style="width:200px;height:100px;background:#ddd">
Hover me!
</div>
<p id="status"></p>
const box = document.getElementById("hoverBox");
const status = document.getElementById("status");
box.addEventListener("mouseover", () => {
status.textContent = "Mouse entered the box.";
});
box.addEventListener("mouseout", () => {
status.textContent = "Mouse left the box.";
});
Mouse entered → "Mouse entered the box."
Mouse exited → "Mouse left the box."
Event Object and Its Properties
The event handler receives an event object which holds information like the target, key pressed, mouse position, etc.
document.addEventListener("click", function(e) {
console.log("Clicked element:", e.target.tagName);
});
Clicked element: BUTTON
Event Bubbling vs Capturing
When you click a nested element, events bubble up from the target to the root. You can also capture events on the way down.
<div id="outer" style="padding:30px; background:lightblue;">
Outer
<div id="inner" style="padding:30px; background:lightgreen;">
Inner
</div>
</div>
document.getElementById("outer").addEventListener("click", () => {
console.log("Outer div clicked");
});
document.getElementById("inner").addEventListener("click", () => {
console.log("Inner div clicked");
});
Click inner → Logs: "Inner div clicked", then "Outer div clicked"
Event Delegation
Instead of adding event listeners to each child, you can attach one to the parent and use event.target to act conditionally.
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
document.getElementById("menu").addEventListener("click", function(e) {
if (e.target.tagName === "LI") {
alert("You clicked on " + e.target.textContent);
}
});
Click "About" → Alert: You clicked on About
Removing Event Listeners
function greet() {
alert("Hello!");
}
const btn = document.querySelector("button");
btn.addEventListener("click", greet);
// Later in the code
btn.removeEventListener("click", greet);
Custom Events
You can create your own events and dispatch them manually.
const msg = new CustomEvent("greet", {
detail: { name: "Developer" }
});
document.addEventListener("greet", function(e) {
console.log("Hello, " + e.detail.name + "!");
});
document.dispatchEvent(msg);
Hello, Developer!
Next Topic ⮕JavaScript Create Elements – DOM
Sign in with Google
Comments
Loading comments...