DOM events & addEventListener

click, input, submit, keydown — every user interaction fires an event you can listen to.

Code example

// click — button press
document.getElementById('login')
  .addEventListener('click', (e) => {
    e.preventDefault();  // stop form submit
    console.log('clicked', e.type);
  });

// input — fires on every keystroke
document.getElementById('g2')
  .addEventListener('input', (e) => {
    document.getElementById('g3').textContent = e.target.value;
  });

How it works

Every user interaction (click, type, scroll, hover, submit) fires a DOM event. addEventListener(type, callback) runs your callback when that event happens. The callback receives an Event object with details: e.target (the element that fired), e.type (the event name), e.preventDefault() (stop the default action — critical for forms so they don't reload the page). The 'input' event fires on every keystroke in a text field — perfect for live previews. The 'click' event fires on button press. The 'submit' event fires on form submit (use it instead of click on the button so Enter-to-submit works).