Understanding Events in JavaScript (Beginner Friendly Guide)

Modern websites are interactive. When you click a button, type in a search box, or submit a form, something happens.

This behavior is possible because of JavaScript Events.

In this blog, we will learn:

1. Introduction to Events
2. How Events Work
3. Common Event Types
4. The Event Object
5. Event Propagation
6. Event Delegation
7. Removing Event Listeners

Let’s start.

1. Introduction to Events

An event is an action that happens in the browser.

Events can be triggered by:

• User actions
• Browser actions

Examples of events

Example

<button id="btn">Click Me</button>

document.getElementById("btn").addEventListener("click", function(){
    alert("Button clicked!");
});

Output

When the user clicks the button, an alert message appears.

This is called interactivity.

Without events, websites would be static like a newspaper page.

2. How Events Work

JavaScript uses an event-driven model.

This means the browser waits for events and then runs code.

The process

1. User performs an action
2. Browser detects the event
3. JavaScript runs the event handler

Syntax of addEventListener

element.addEventListener("event", function)

Example

<button id="btn">Click</button>

let btn = document.getElementById("btn");

btn.addEventListener("click", function(){
    console.log("Button was clicked");
});

Output

Button was clicked

This message appears in the console when the button is clicked.

3. Common Event Types

JavaScript has many event types.

1. Mouse Events
Triggered by mouse actions.

Example

<div id="box">Hover over me</div>

let box = document.getElementById("box");

box.addEventListener("mouseover", function(){
    box.style.background = "yellow";
});

box.addEventListener("mouseout", function(){
    box.style.background = "white";
});

Output
When the mouse enters the box → yellow background
When the mouse leaves → white background

2. Keyboard Events

Triggered when keys are pressed.

Example

<input type="text" id="inputBox">

let input = document.getElementById("inputBox");

input.addEventListener("keydown", function(event){
    console.log("Key pressed:", event.key);
});

Output

Typing A B C

Console shows

Key pressed: A
Key pressed: B
Key pressed: C

3. Form Events

Used when working with forms.

Example

<form id="form">
<input type="text">
<button>Submit</button>
</form>

let form = document.getElementById("form");

form.addEventListener("submit", function(event){
    event.preventDefault();
    alert("Form submitted!");
});

Output
The alert appears without refreshing the page.

4. Window / Document Events

These events happen on the browser window.

Example

window.addEventListener("scroll", function(){
    console.log("User is scrolling");
});

4. The Event Object

Whenever an event occurs, JavaScript creates an event object.

This object contains information about the event.

Example

document.addEventListener("click", function(event){
    console.log(event.target);
});

Important Properties

Example

document.addEventListener("click", function(event){
    console.log("Clicked element:", event.target);
    console.log("Event type:", event.type);
});

Prevent Default Behaviour

Some elements have default actions.

Example:

• Form reload
• Link navigation

We can stop it using:

event.preventDefault()

Example

<a href="https://google.com" id="link">Go to Google</a>

document.getElementById("link").addEventListener("click", function(event){
    event.preventDefault();
    alert("Link prevented!");
});

5. Event Propagation [To Be Discussed]

When an event happens inside nested elements, it travels through the DOM.

This is called event propagation.

There are two phases:

1. Event Bubbling

Event goes from child → parent → document

Example:

<div id="parent">
<button id="child">Click</button>
</div>

document.getElementById("child").addEventListener("click", function(){
    console.log("Child clicked");
});

document.getElementById("parent").addEventListener("click", function(){
    console.log("Parent clicked");
});

Output

Child clicked
Parent clicked

Because event bubbles up.

2. Event Capturing

Event goes from parent → child

addEventListener("click", function, true)

Example

document.getElementById("parent").addEventListener("click", function(){
    console.log("Parent capturing");
}, true);

stopPropagation()

Stops the event from moving further.

document.getElementById("child").addEventListener("click", function(event){
    event.stopPropagation();
    console.log("Child only");
});

Output

Child only

Parent event will not run.

Example

document
   ↓
body
   ↓
parent
   ↓
child (clicked)
   ↑
parent
   ↑
body
   ↑
document

• Capturing → top to bottom
• Bubbling → bottom to top

6. Event Delegation

Instead of adding many event listeners, we can add one listener to the parent.

This technique is called event delegation.

It improves performance.

Example 1

<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

document.getElementById("list").addEventListener("click", function(event){

    if(event.target.tagName === "LI"){
        console.log("You clicked:", event.target.innerText);
    }

});

Output

Clicking any item shows:(The exact element that was clicked by the user)

You clicked: Item 2

Even if new <li> is added later, it still works.

7. Removing Event Listeners

We can remove an event listener using:

removeEventListener()

But the function must be named.

Example

function sayHello(){
    console.log("Hello");
}

let btn = document.getElementById("btn");

btn.addEventListener("click", sayHello);

btn.removeEventListener("click", sayHello);

Anonymous functions cannot be removed easily.

Conclusion
JavaScript events are essential for creating interactive web applications. Understanding how events work helps developers handle user actions effectively and build dynamic user interfaces.