The DOM

Events

Events let your code react to the user: clicks, typing, scrolling, submitting a form.

Syntax:

element.addEventListener("eventName", (event) => { /* ... */ });

const button = document.querySelector("#like");
let likes = 0;

button.addEventListener("click", () => {
  likes++;
  button.textContent = `Likes: ${likes}`;
});

Event	Fires when
`click`	An element is clicked
`input`	The value of an input changes (every keystroke)
`change`	A select, checkbox or input value is committed
`submit`	A form is submitted
`keydown`	A key is pressed
`scroll`	The page or an element scrolls
`DOMContentLoaded`	The HTML has finished loading

The event object

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape") console.log("Escape pressed");
});