JavaScript Events
Events are signals the browser fires when something happens, and JavaScript lets you run code in response so your pages can react to users.
What is an event?
An event is a message from the browser that something noteworthy occurred: a user clicked a button, moved the mouse, pressed a key, submitted a form, or the page finished loading. By listening for these events and attaching functions to them, you turn a static page into an interactive one. The function you run in response is called an event handler or listener.
- Mouse events such as click, dblclick, mouseover, and mouseout.
- Keyboard events such as keydown and keyup.
- Form events such as submit, change, input, and focus.
- Window and document events such as load, resize, and scroll.
Listening with addEventListener
The recommended way to respond to an event is element.addEventListener(type, handler). It takes the event name as a string and a function to run each time that event fires. Unlike older approaches, addEventListener lets you attach many handlers to the same element and keeps your JavaScript separate from your HTML.
Handling a click
<!DOCTYPE html>
<html>
<body>
<button id="save">Save</button>
<script>
const button = document.querySelector("#save");
button.addEventListener("click", function () {
console.log("Saved!");
});
// Arrow functions work too
button.addEventListener("click", () => {
button.textContent = "Done";
});
</script>
</body>
</html>The event object
When an event fires, the browser passes an event object to your handler as its first argument. It carries details about what happened: which element was involved (event.target), the key that was pressed, the mouse position, and methods to control default behavior. Calling event.preventDefault() stops the browser's built-in reaction, such as a form actually submitting.
Using the event object
<!DOCTYPE html>
<html>
<body>
<form id="login">
<input type="email" id="email" placeholder="Email">
<button type="submit">Log in</button>
</form>
<script>
const form = document.querySelector("#login");
form.addEventListener("submit", function (event) {
event.preventDefault(); // stop the page from reloading
const email = event.target.querySelector("#email").value;
console.log("Submitting:", email);
});
</script>
</body>
</html>Removing listeners and cleaning up
You can stop listening with removeEventListener, but only if you pass the exact same function reference you added, so anonymous inline functions cannot be removed. Store the handler in a variable when you plan to detach it later. This matters in long-running apps to avoid leaking memory and duplicate reactions.
Adding and removing a named handler
<!DOCTYPE html>
<html>
<body>
<h2>Scroll Event Listener</h2>
<script>
function onScroll() {
console.log(window.scrollY);
}
window.addEventListener("scroll", onScroll);
// Later, stop listening
window.removeEventListener("scroll", onScroll);
</script>
</body>
</html>- Prefer addEventListener; it supports multiple handlers and keeps markup clean.
- Every handler receives an event object with details and control methods.
- Use event.preventDefault() to stop default browser actions like form submission.
- Remove listeners with the same function reference to clean up and prevent leaks.
Exercise: JavaScript Events
What does calling event.preventDefault() inside a handler do?
