The browser fires events for almost everything a user does — clicking, typing, submitting a form — and addEventListener() is how your code listens for and reacts to them. This lesson walks through the most common mouse, keyboard, and form events and how to use the event object to read input and control default browser behavior.
1JS Common Events | JavaScript Tutorial - In-Depth Guide Part 1
Events are actions that happen in the browser. You can listen for them using 'addEventListener'.
// The Browser Event SystemEvents
2JS Common Events | JavaScript Tutorial - In-Depth Guide Part 2
Mouse events are the most common. 'click', 'dblclick', 'mouseenter', and 'mouseleave' let you track where the user's cursor is.
button.addEventListener('click', () => {
alert('Clicked!');
});Mouse Events
3JS Common Events | JavaScript Tutorial - In-Depth Guide Part 3
Keyboard events let you track what the user types. 'keydown', 'keyup', and 'keypress' are essential for accessibility and forms.
document.addEventListener('keydown', (event) => {
console.log(`Key pressed: ${event.key}`);
});Keyboard Events
4JS Common Events | JavaScript Tutorial - In-Depth Guide Part 4
Form events are critical for data entry. 'submit', 'change', and 'input' allow you to validate data before it goes to the server.
form.addEventListener('submit', (event) => {
event.preventDefault(); // Stop reload
console.log('Validating...');
});Form Events
5JS Common Events | JavaScript Tutorial - In-Depth Guide Part 5
Events mastered! You can now make your web pages truly interactive and responsive to user input.
<h1>Events: Handled</h1>Events Mastered
6Step-by-Step Breakdown
Events are actions that happen in the browser. You can listen for them using 'addEventListener'.
Mouse events are the most common. 'click', 'dblclick', 'mouseenter', and 'mouseleave' let you track where the user's cursor is.
Checkpoint: Which method is used to attach an event handler to an element?
- →on()
- →addEventListener()
- →attachEvent()
Keyboard events let you track what the user types. 'keydown', 'keyup', and 'keypress' are essential for accessibility and forms.
Form events are critical for data entry. 'submit', 'change', and 'input' allow you to validate data before it goes to the server.
Checkpoint: How do you stop a form from refreshing the page when it is submitted?
- →event.stopPropagation()
- →event.preventDefault()
- →event.halt()
Events mastered! You can now make your web pages truly interactive and responsive to user input.
Level Up 🚀
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Keyboard Events Must Mirror What Mouse Events Do
If a custom control (like a div styled as a button) only listens for 'click', keyboard-only and screen-reader users who trigger it with Enter or Space via a 'keydown' handler will be locked out — always pair pointer handlers with equivalent keyboard handlers, or use a native <button> which fires both automatically.
el.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') activate(); });SEO Implications
- 1
Content Revealed Only via JS Events Can Be Invisible to Crawlers
If critical content only renders after a 'click' or 'submit' event fires (e.g. a 'load more' handler), search engines that don't fully execute your event-driven JavaScript may never see that content, so important text and links should not depend solely on user-triggered events to appear.
Best Practices
Remove Event Listeners You No Longer Need
Attaching a listener with addEventListener() and never calling removeEventListener() on elements that get removed from the DOM (especially in single-page apps) keeps those elements and their closures alive in memory, causing a slow memory leak.
Use Event Delegation for Lists of Elements
Instead of attaching a click listener to every row in a table, attach one listener to the parent and inspect event.target — this scales to dynamically added rows and uses far less memory than one listener per element.
Frequent Bugs
A submit handler calls event.preventDefault() but the page still reloads.
This usually happens when the listener was attached to the button's 'click' event instead of the form's 'submit' event, so preventDefault() never runs on the event that actually triggers navigation — attach the handler to the <form>'s submit event instead.
Real-World Examples
Debounced Search Input Using the 'input' Event
A search box needed to avoid firing an API call on every single keystroke, since that would spam the server while the user was still typing.
let timer;
searchInput.addEventListener('input', (e) => {
clearTimeout(timer);
timer = setTimeout(() => runSearch(e.target.value), 300);
});