JavaScript Tutorial – Day 12: DOM Events in JavaScript
In this JavaScript tutorial, we will learn about DOM Events in JavaScript. Events are actions that happen in the browser — like clicking a button, typing in an input field, hovering over an element, or pressing a key.
With DOM events, JavaScript can listen to these actions and respond dynamically. This is how we make websites interactive. In last blow, we already introduced DOM in JavaScript to you.
What are Events in JavaScript?
An event is a signal that something has happened on a web page.
Examples:
- A user clicks a button
- A form is submitted
- A key is pressed
- The page finishes loading
In JavaScript, we can detect events and then run some code when they occur.
Adding Events in JavaScript
There are 3 common ways to add events:
1. Inline HTML Events (not recommended ❌)
<button onclick="alert('Button Clicked!')">Click Me</button>👉 Quick, but mixes HTML with JavaScript (bad practice).
2. Using HTML DOM Property
<button id="btn">Click Me</button>
<script>
let btn = document.getElementById("btn");
btn.onclick = function() {
alert("Button Clicked!");
};
</script>👉 Simple, but allows only one event handler per element.
3. Using addEventListener() ✅ (Best Practice)
<button id="btn">Click Me</button>
<script>
let btn = document.getElementById("btn");
btn.addEventListener("click", function() {
alert("Button Clicked using addEventListener!");
});
</script>👉 Flexible, allows multiple event listeners, and works with modern JavaScript.
Common DOM Events
Here are some useful events you’ll use often:
| Event | Description |
|---|---|
click | When an element is clicked |
dblclick | When double-clicked |
mouseover | When the mouse pointer is over an element |
mouseout | When the mouse pointer leaves an element |
keydown | When a key is pressed |
keyup | When a key is released |
input | When user types in input/textarea |
submit | When a form is submitted |
load | When the page or image is fully loaded |
Example: Button Click Event
<!DOCTYPE html>
<html>
<head>
<title>DOM Events Example</title>
</head>
<body>
<h1 id="heading">Hello!</h1>
<button id="btn">Change Text</button>
<script>
let btn = document.getElementById("btn");
let heading = document.getElementById("heading");
btn.addEventListener("click", function() {
heading.innerText = "You clicked the button!";
heading.style.color = "blue";
});
</script>
</body>
</html>👉 When you click the button, the text and color of the heading changes.
Event Object
When an event occurs, JavaScript automatically passes an event object that contains details about the event.
document.getElementById("btn").addEventListener("click", function(event) {
console.log(event.type); // "click"
console.log(event.target); // the button element
});Event Bubbling & Capturing
Events in JavaScript follow a flow:
- Capturing Phase – Event moves from root → target element
- Target Phase – Event reaches the target
- Bubbling Phase – Event bubbles back up (default behavior)
Example with bubbling:
document.getElementById("parent").addEventListener("click", () => {
alert("Parent clicked!");
});
document.getElementById("child").addEventListener("click", () => {
alert("Child clicked!");
});👉 If you click the child element, both child and parent handlers will fire (bubbling).
To stop bubbling:
event.stopPropagation();Why DOM Events Are Important?
- Enables user interaction (buttons, forms, navigation).
- Essential for building dynamic UI.
- Forms the foundation of modern frameworks like React & Vue (which are event-driven).
👉 Learn more about events on MDN Web Docs.
Conclusion
In this JavaScript tutorial, we explored DOM Events in JavaScript, including how to add event listeners, common event types, and concepts like bubbling and event objects.
Next, in Day 13, we will cover Forms & Input Handling in JavaScript — an essential skill for validating user input.
