HTML Events

Understand the topic

Events report changes and interactions, such as clicks, input, focus, and submission. addEventListener connects a handler without embedding JavaScript in markup. Event bubbling allows a parent to observe descendant events, while event.target identifies where an event originated. preventDefault cancels an allowed default action; it does not stop propagation by itself.

Worked example

<label for="live-name">Name</label><input id="live-name"><p id="live-output" role="status"></p>
<script>
document.querySelector("#live-name").addEventListener("input", (event) => {
  document.querySelector("#live-output").textContent = "Characters entered: " + event.target.value.length;
});
</script>

input fires as the value changes. A form submit handler belongs on the form so keyboard submission and button activation follow the same path.

Practice

Name an appropriate event for live typing feedback and one for handling a completed form submission.

Use input for live value changes and submit on the form for submission.

Common mistake

Do not handle only a submit button click and ignore forms submitted from the keyboard.

HTML documentation