Events & Event Handling in JavaScript – A Complete Beginner Guide

📌 What is an Event in JavaScript?

An event is an action or occurrence that happens in the browser and can be detected by JavaScript.

Events allow JavaScript to respond to user interactions and browser activities, making web pages interactive and dynamic.

🔹 Events can be triggered by:

• 👤 User actions (clicking, typing, hovering)
• 🌐 Browser actions (page load, resize, scroll)

🔹 Common Examples of Events:

• Clicking a button
• Pressing a keyboard key
• Hovering over an element
• Loading a web page

👉 In simple words:

Event = Something happens → JavaScript reacts

---

📌 Types of Events in JavaScript

JavaScript provides many built-in events, grouped by their purpose.

---

🖱 Mouse Events

Triggered by mouse interactions.

• click – when an element is clicked
• dblclick – when double-clicked
• mouseover – when mouse enters an element
• mouseout – when mouse leaves an element

---

⌨ Keyboard Events

Triggered by keyboard actions.

• keydown – when a key is pressed
• keyup – when a key is released

---

📝 Form Events

Triggered by form-related actions.

• submit – when a form is submitted
• change – when input value changes
• focus – when input gets focus
• blur – when input loses focus

---

🌐 Browser / Window Events

Triggered by browser-level activities.

• load – when the page finishes loading
• resize – when the window size changes
• scroll – when the page is scrolled

---

📌 What is Event Handling?

Event handling is the process of writing JavaScript code that runs when an event occurs.

📌 It defines how your application reacts to user actions.

🔹 Example Explanation:

When a user clicks a button →

JavaScript executes a function →

An action is performed (show message, submit form, etc.)

Event → Handler → Action

---

📌 Ways to Handle Events in JavaScript

There are three main ways to handle events in JavaScript.

---

❌ 1. Inline Event Handling (Not Recommended)

<button onclick="alert('Clicked')">Click</button>

⚠ Why this is NOT recommended:
Mixes HTML and JavaScript
Hard to maintain in large projects
Not scalable
Poor separation of concerns

📌 This method is outdated and should be avoided in modern development.

2. DOM Property Method

const button = document.querySelector("button");
button.onclick = function () {
  console.log("Button clicked");
};

❌ Drawback:

Only one event handler can exist
New handler overrides the previous one

3. Best Method: addEventListener (Recommended)

const button = document.querySelector("button");

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

✅ Why addEventListener is best:

Allows multiple event handlers

Cleaner and scalable code

Modern JavaScript standard

Works well with frameworks like React

💡 Best Practice:

Always use addEventListener for handling events in real-world applications.