What are Events in JavaScript?

What are events?

In JavaScript, an event is any action or occurrence that happens in the browser window.

These events allow web pages to respond to user interactions and system changes.

Common types of events

• 🖱️ Mouse events — click, dblclick, mouseover
• ⌨️ Keyboard events — keydown, keyup
• 📄 Form events — submit, input, change
• 🌐 Window events — load, resize, scroll

Example: click event

// Run code when button is clicked
document.querySelector("button").addEventListener("click", function() {
  alert("Button clicked!");
});

How events work

• 1. User performs an action (click, type, scroll)
• 2. Browser detects the event
• 3. JavaScript listens for it
• 4. A function runs in response

addEventListener()

The most common way to handle events is using addEventListener.

element.addEventListener("event", function() {
  // code here
});

Example: input event

let input = document.querySelector("input");

input.addEventListener("input", function() {
  console.log(input.value);
});

Why events are important

• They make websites interactive
• They respond to user actions
• They are essential for modern web apps
• They power buttons, forms, menus, games, and more

Summary

JavaScript events are actions that happen in the browser, and JavaScript uses them to make web pages interactive.

Without events, websites would be static and non-responsive.