Event Listener
Definition
A listener is registered with element.addEventListener, which takes the name of the event and the function to run. The names you meet most are click, submit, input, change, keydown and DOMContentLoaded. When the event happens the browser calls your function and hands it an event object: event.target is the element the event started on, event.preventDefault stops the browser doing its own default thing, and for a keypress event.key holds the key that was pressed. Events travel upward, so a click on a button inside a card fires on the button first and then passes through every ancestor, which lets one listener on a container handle clicks on a hundred children. The older style, an onclick attribute written straight into the HTML, still works but allows only one handler per element.
Why It Matters
A dead button is the commonest thing wrong with a page someone else built, and the cause is almost always the listener rather than the button. If addEventListener ran before the element existed, nothing was attached and the click goes nowhere. If the handler throws on its first line, the click appears to do nothing while the console records the real problem. And a listener attached to an element that a later script replaced is bound to an object no longer on the page. From the outside all three look identical; in the Elements panel they are seconds apart.
How It Works
The browser keeps a list of listeners per element, per event type. addEventListener('click', handler) adds one, and removeEventListener needs the same function reference to take it off again, which is why a listener added as an inline arrow function can never be removed. After your handler runs, the event carries on up the tree to the parent, the grandparent and eventually document — that is bubbling, and event.stopPropagation cuts it short. On a form, the submit event fires before the browser navigates, so event.preventDefault is what stops the page reloading and losing everything. Most scripts wrap their setup in a DOMContentLoaded listener, which fires once the HTML has been parsed but before images have finished loading.
Real-World Example
A booking form on a workshop page at autumn-class.99helpers.site does nothing when Book is clicked. The Console panel shows one red line: Cannot read properties of null reading addEventListener. The Elements panel shows the button carries the id book-btn while the script asks for getElementById('bookBtn'). Nothing matched, so there was never a listener to fire. Correcting the id and re-uploading the single HTML file to 99helpers takes about a minute, with the old version kept in version history in case the fix is wrong.
Common Mistakes
- ✕Attaching a listener before the element exists — a script in the head runs first, so there is nothing to attach to and the button stays dead
- ✕Forgetting event.preventDefault on a form submit — the page reloads, the console clears itself, and it looks as though the handler never ran
- ✕Adding a listener inside a function that runs more than once — the handlers stack up and a single click fires the same code three times
Related Terms
DOM Element
A DOM element is a single node in the live tree the browser builds from your HTML — one heading, one button, one image — that JavaScript can read, change or remove while the page is open.
Form Element
A form element is the HTML form tag and the controls inside it. It collects what somebody types and, on submit, either sends it to a URL or hands it to JavaScript.
Console Error
A console error is a message the browser writes when something on the page fails — a script throwing, a file that would not load, a request the browser refused. It is the first place to look when a page misbehaves.
Developer Tools
Developer tools are the inspection panels built into every desktop browser, opened with F12 or by right-clicking and choosing Inspect. They show the live page, its scripts, its network requests and its errors.
Inline JavaScript
JavaScript written inside the HTML document — in a script element with no src attribute, or in an attribute such as onclick — rather than loaded from a .js file. It keeps a generated page to one file.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →