# JavaScript Events: Making Web Pages Interactive ⚡

Have you ever clicked a button and something happened on a website?  
Maybe text changed, a popup opened, or a form was submitted.

That magic happens because of **JavaScript Events**.

In this blog, we’ll learn:

* What events are
    
* Why events are important
    
* What event listeners are
    
* Event bubbling and capturing
    
* How to stop event propagation  
    All with **easy examples** 👇
    

## What Are Events in JavaScript?

An **event** is something that happens on a webpage.

### Common Events

* Clicking a button
    
* Hovering over an element
    
* Typing in an input box
    
* Submitting a form
    
* Page loading
    

👉 JavaScript listens for these events and **responds** to them.

## Why Are Events Important?

Without events ❌  
A webpage is just **static content**.

With events ✅  
A webpage becomes **interactive and dynamic**.

Examples:

* Clicking “Login” button
    
* Changing theme (dark/light)
    
* Showing error messages
    
* Animations and popups
    

## Simple Example: Button Click Event

### HTML

```javascript
<button id="btn">Click Me</button>
<p id="text">Hello!</p>
```

### JavaScript

```javascript
const button = document.getElementById("btn");
const text = document.getElementById("text");

button.addEventListener("click", () => {
  text.textContent = "You clicked the button!";
});
```

### What Happens?

1. User clicks the button
    
2. `click` event fires
    
3. Text changes instantly 🎉
    

## What Is an Event Listener?

An **event listener** tells JavaScript:

> “Hey, when this event happens, run this code.”

### Syntax

```javascript
element.addEventListener("event", function);
```

### Example

```javascript
button.addEventListener("click", sayHello);

function sayHello() {
  alert("Hello!");
}
```

## Common Event Types

| Event | Trigger |
| --- | --- |
| `click` | Mouse click |
| `mouseover` | Hover |
| `keydown` | Key press |
| `submit` | Form submit |
| `load` | Page load |

## Multiple Event Listeners

You can attach **multiple listeners** to the same element.

```javascript
button.addEventListener("click", () => {
  console.log("Clicked!");
});

button.addEventListener("click", () => {
  console.log("Button pressed!");
});
```

Both will run ✔️

## Event Propagation (Very Important Concept)

When an event happens, it doesn’t stop at one element.  
It **travels through the DOM**.

This is called **event propagation**.

There are **two phases**:

1. Capturing phase
    
2. Bubbling phase
    

## Event Bubbling (Default Behavior)

Event starts from the **target element** and moves **upward**.

### Example

```javascript
<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("Button clicked");
});
```

### Output When Button Is Clicked

```javascript
Button clicked
Parent clicked
```

👉 Event bubbles **up** from child → parent

## Event Capturing (Opposite of Bubbling)

Event starts from the **top** and goes **downward**.

To enable capturing, pass `true` as the third parameter.

```javascript
parent.addEventListener("click", () => {
  console.log("Parent clicked");
}, true);

child.addEventListener("click", () => {
  console.log("Button clicked");
}, true);
```

### Output

```javascript
Parent clicked
Button clicked
```

## Bubbling vs Capturing (Comparison Table)

| Feature | Bubbling | Capturing |
| --- | --- | --- |
| Direction | Bottom → Top | Top → Bottom |
| Default | ✅ Yes | ❌ No |
| Commonly used | ✅ Yes | ❌ Rare |

## Stopping Event Propagation 🛑

Sometimes, you **don’t want the event to go further**.

Use:

```javascript
event.stopPropagation();
```

### Example

```javascript
child.addEventListener("click", (event) => {
  event.stopPropagation();
  console.log("Button clicked");
});
```

### Result

Only button event runs.  
Parent event is stopped 🚫

## Real-World Use Case

* Clicking a **modal button** but not closing the modal
    
* Preventing parent clicks in dropdown menus
    
* Complex UI components