Event handling matters once your pages get past the basics. How JavaScript listens for clicks, key presses, form changes, and other browser events, then runs your code in response.
What is an event?
An event is something that happens in the browser – a mouse click, a key press, a form submission, a page finishing load, a video ending. JavaScript can wait for these and react.
How does event handling work?
You attach a listener to an element. When the event occurs, the listener calls a function (the event handler).
Adding event listeners
The standard way to handle events is addEventListener.
Syntax
element.addEventListener(event, function);Example – click event
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});When the button is clicked, an alert box appears.
Event object
The handler receives an event object with details about what happened – the event type, the target element, and more.
Example – event object
button.addEventListener("click", function(event) {
console.log("Event type:", event.type); // Outputs: click
});Different types of events
Some common event groups:
- Mouse events: ‘click’, ‘dblclick’, ‘mouseover’, ‘mouseout’
- Keyboard events: ‘keypress’, ‘keydown’, ‘keyup’
- Form events: ‘submit’, ‘change’, ‘focus’, ‘blur’
- Window events: ‘load’, ‘resize’, ‘scroll’
Removing event listeners
Use removeEventListener to detach a handler. Useful when you no longer need it, or to avoid duplicate handlers.
Example – removing an event listener
function clickHandler() {
alert("Button clicked!");
}
button.addEventListener("click", clickHandler);
// Later in your code
button.removeEventListener("click", clickHandler);Event propagation: bubbling and capturing
Events move through the DOM in two phases:
- Bubbling: from the target element up to the document.
- Capturing: from the document down to the target element.
Example – bubbling
document.getElementById("parent").addEventListener("click", function() {
console.log("Parent clicked!");
});
document.getElementById("child").addEventListener("click", function() {
console.log("Child clicked!");
});Click the child element and both handlers fire – “Child clicked!” first, then “Parent clicked!” – because the event bubbles up.
Preventing default behaviour
Some events trigger a default browser action (like submitting a form). Call preventDefault() to stop it.
Example – prevent default
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault();
// Handle form submission
});This stops the browser’s default form submission so you can handle it with JavaScript instead.
Practical use of event handling
Events are not just for button clicks. They drive interactive forms, dynamic interfaces, games, and more.
Example – interactive form
let input = document.getElementById("myInput");
input.addEventListener("input", function(event) {
console.log("Input value:", event.target.value);
});Every keystroke in the input field is logged to the console.
Event handling is what makes web pages respond to the user. Try attaching listeners to different elements and see what you can build.