Events

📘What it really is

• An event is something that happens on the page: a click, a key press, typing in a field, a form being sent, the page finishing loading.

• addEventListener connects an event to a function (the handler):

const button = document.querySelector("#menu-button");
button.addEventListener("click", () => {
  document.querySelector("nav").classList.toggle("open");
});

• Common events:
• click: a click or a tap;
• input: the value of a field changes (every key press);
• change: a field is changed and left (useful for drop-downs and checkboxes);
• submit: a form is being sent;

• keydown: a key is pressed.

• The handler receives an event object with details, often named event or e: event.target is the element that was clicked or typed in.

• Avoid the old onclick="..." attribute in HTML. Keep JavaScript in .js files, like CSS in .css files.