JavaScript Events and Event Handling
JavaScript becomes powerful when it interacts with users.
Anything the user does on a webpage — clicking a button, typing in a textbox, scrolling, hovering — triggers events.
Events let your webpage respond to actions immediately, making it interactive and dynamic.
In this chapter, you will learn:
What events are
How to use event listeners
Types of events
Event bubbling and capturing
Real-life examples
What Is an Event?
An event is an action or occurrence in the browser.
Examples:
Click
Double click
Mouse move
Keyboard press
Form submit
Input change
Page load
Scroll
JavaScript listens to these events and runs specific code in response.
Event Listener
The most common way to handle events is using:
element.addEventListener(eventName, callbackFunction);
Example 1: Click Event
HTML:
<button id="btn">Click Me</button>
JavaScript:
document.getElementById("btn").addEventListener("click", function() {
console.log("Button clicked!");
});
Output:
Button clicked!
Example 2: Mouse Over Event
let box = document.getElementById("box");
box.addEventListener("mouseover", () => {
console.log("Mouse is over the box");
});
Example 3: Input Event
HTML:
<input id="nameInput" placeholder="Type your name">
JavaScript:
document.getElementById("nameInput").addEventListener("input", function() {
console.log("Typed:", this.value);
});
Example 4: Form Submit Event
<form id="myForm">
<input placeholder="Enter email">
<button>Submit</button>
</form>
JavaScript:
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // stops page reload
console.log("Form submitted!");
});
Example 5: Key Press Event
document.addEventListener("keydown", function(event) {
console.log("Key pressed:", event.key);
});
Common Event Types
Mouse Events:
click
dblclick
mouseover
mouseout
mousedown
mouseup
Keyboard Events:
keydown
keyup
keypress
Form Events:
submit
input
change
focus
blur
Window Events:
load
scroll
resize
Removing Event Listeners
function sayHello() {
console.log("Hello");
}
btn.addEventListener("click", sayHello);
// Remove listener
btn.removeEventListener("click", sayHello);
Event Object
Every event listener receives an event object containing useful information.
document.addEventListener("click", function(e) {
console.log(e.type); // type of event
console.log(e.target); // clicked element
console.log(e.clientX); // x coordinate
});
Event Bubbling and Capturing
When an event happens on an element, it moves through the DOM in two phases:
Capturing phase (downwards)
Bubbling phase (upwards)
By default, events bubble upward.
Example: Event Bubbling
<div id="parent">
<button id="child">Click Me</button>
</div>
JavaScript:
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked");
});
document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked");
});
Click button output:
Child clicked
Parent clicked (because of bubbling)
Stop Bubbling
child.addEventListener("click", function(event) {
event.stopPropagation();
console.log("Only child clicked");
});
Event Capturing
To use capturing, pass true as the third argument:
parent.addEventListener("click", () => {
console.log("Parent capture");
}, true);
Real-Life Example: Show and Hide Password
HTML:
<input type="password" id="pass">
<button id="toggle">Show</button>
JavaScript:
document.getElementById("toggle").addEventListener("click", () => {
let pass = document.getElementById("pass");
pass.type = pass.type === "password" ? "text" : "password";
});
Real-Life Example: Light and Dark Mode Toggle
<button id="themeBtn">Toggle Theme</button>
JavaScript:
document.getElementById("themeBtn").addEventListener("click", () => {
document.body.classList.toggle("dark");
});
Example Program (Complete)
let btn = document.getElementById("clickBtn");
let count = 0;
btn.addEventListener("click", () => {
count++;
console.log("Clicked:", count);
});
Output:
Clicked: 1
Clicked: 2
Clicked: 3
...
Common Mistakes Beginners Make
Not using event.preventDefault() in forms
Forgetting to remove event listeners
Using onclick instead of addEventListener
Confusing event.target with this
Not stopping event bubbling when needed
Practice Tasks (Do It Yourself)
Create a button that changes text when clicked.
Make an input box that shows live typing output.
Build a simple form with submit validation.
Change background color when mouse enters a box.
Create a click counter using event listeners.