# Event Listeners in JavaScript: How to Handle User Actions the Right Way

## Event Listeners

Modern websites are interactive.

Buttons are clicked.  
Forms are submitted.  
Keys are pressed.

All of this happens because of **events**.

In this article, you will learn:

* what events are
    
* what event listeners do
    
* how to add and remove event listeners
    
* common event types
    
* event object basics
    
* event bubbling and capturing (intro)
    
* best practices
    

Let’s start from the beginning.

---

## What Is an Event?

An **event** is an action that happens in the browser.

Examples:

* clicking a button
    
* typing on the keyboard
    
* submitting a form
    
* scrolling a page
    
* loading a website
    

JavaScript can **listen** for these events and respond to them.

---

## What Is an Event Listener?

An **event listener** is a function that runs when a specific event occurs on an element.

Syntax:

```javascript
element.addEventListener(event, handler);
```

---

## Your First Event Listener

HTML:

```javascript
<button id="btn">Click me</button>
```

JavaScript:

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

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

When you click the button, the function runs.

---

# Why Use `addEventListener`?

Older way (not recommended):

```javascript
<button onclick="handleClick()">Click</button>
```

Problems:

* mixes HTML and JavaScript
    
* allows only one handler
    
* harder to manage
    

✔ `addEventListener` is cleaner and safer.

---

# Common Event Types

---

## Mouse Events

```javascript
click
dblclick
mouseenter
mouseleave
mousemove
```

Example:

```javascript
box.addEventListener("mouseenter", () => {
  box.style.backgroundColor = "blue";
});
```

---

## Keyboard Events

```javascript
keydown
keyup
keypress // deprecated
```

Example:

```javascript
document.addEventListener("keydown", (event) => {
  console.log(event.key);
});
```

---

## Form Events

```javascript
submit
change
input
focus
blur
```

Example:

```javascript
form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Form submitted");
});
```

---

## Window Events

```javascript
load
resize
scroll
```

Example:

```javascript
window.addEventListener("resize", () => {
  console.log(window.innerWidth);
});
```

---

# The Event Object

Every event listener receives an **event object**.

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

Common properties:

| Property | Meaning |
| --- | --- |
| `event.type` | Event name |
| [`event.target`](http://event.target) | Element that triggered event |
| `event.preventDefault()` | Stops default behavior |
| `event.stopPropagation()` | Stops bubbling |

---

## Example Using [`event.target`](http://event.target)

```javascript
list.addEventListener("click", (e) => {
  console.log(e.target.textContent);
});
```

---

# Removing Event Listeners

To remove a listener, you must use a **named function**.

```javascript
function handleClick() {
  console.log("Clicked");
}

btn.addEventListener("click", handleClick);
btn.removeEventListener("click", handleClick);
```

❌ This will not work:

```javascript
btn.removeEventListener("click", () => {});
```

---

# Event Bubbling (Important Concept)

Events **bubble up** from child to parent.

HTML:

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

JavaScript:

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

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

Clicking the button logs:

```javascript
Child clicked
Parent clicked
```

---

## Stop Bubbling

```javascript
child.addEventListener("click", (e) => {
  e.stopPropagation();
});
```

---

# Event Capturing (Brief Intro)

Capturing is the opposite of bubbling.

```javascript
element.addEventListener("click", handler, true);
```

Most developers rarely use capturing.

---

# Event Delegation (Very Important)

Instead of adding listeners to many children, add **one listener to the parent**.

```javascript
list.addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log(e.target.textContent);
  }
});
```

Benefits:

✔ Better performance  
✔ Works with dynamic elements  
✔ Cleaner code

---

# Common Mistakes

---

### ❌ Forgetting `preventDefault()`

```javascript
form.addEventListener("submit", () => {
  // page reloads
});
```

---

### ❌ Adding too many listeners

Use event delegation when possible.

---

### ❌ Using arrow functions when removing listeners

Arrow functions cannot be removed.

---

# Best Practices

✔ Use `addEventListener`  
✔ Prefer event delegation  
✔ Keep handlers small  
✔ Use meaningful function names  
✔ Remove listeners when not needed