Events and Event Listeners

Events are signals that something has happened in the browser — a user clicked a button, typed in a field, scrolled the page, or submitted a form. Event listeners let your JavaScript code respond to these signals and make web pages interactive.

---

What Is an Event?

An event is an object that represents an action or occurrence. Common event types include:

Category	Events
Mouse	click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
Keyboard	keydown, keyup, keypress (deprecated)
Form	submit, change, input, focus, blur
Window	load, resize, scroll, beforeunload
Touch	touchstart, touchmove, touchend
Drag	drag, dragstart, dragend, drop

---

Adding Event Listeners

The recommended way to listen for events is addEventListener:

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

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

With an Arrow Function

button.addEventListener("click", () => {
  console.log("Clicked with arrow function!");
});

With a Named Function

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

button.addEventListener("click", handleClick);

Why named functions? You can remove the listener later — button.removeEventListener("click", handleClick).

---

The Event Object