User events
Clicks, input, key presses and pointer movement.
Platform under construction
Events
Events are signals from the browser: a click happened, a key was pressed, a form was submitted or a page finished loading.
button.addEventListener("click", () => {
status.textContent = "Clicked";
});
Events & Forms
Events let JavaScript respond to users and the browser.
An event is a notification that something happened. User actions, browser lifecycle changes and network activity can all produce events.
JavaScript reacts to events by registering event listeners. A listener is a function that runs when the event is fired.
Good event code keeps behavior predictable: listen to the right element, handle the right event and update the interface in a clear way.
Browser events
load, resize, visibility and navigation-related events.
Event listener
A function registered to run when an event happens.
Event target
The element where the event started.
Examples
Event code should respect how people actually use the interface.
Listen to a specific action
button.addEventListener("click", () => {
panel.hidden = !panel.hidden;
});
Putting behavior in inline HTML
<button onclick="togglePanel()">Toggle</button> // Harder to organize, test and reuse.
Code patterns
Reusable examples for quick reference.
These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.
Click event
Run code after a button click.
button.addEventListener("click", () => {
console.log("clicked");
});
Input event
React while a field changes.
field.addEventListener("input", () => {
output.textContent = field.value;
});
Submit event
Handle a form intentionally.
form.addEventListener("submit", event => {
event.preventDefault();
});
Keyboard event
Read the pressed key.
window.addEventListener("keydown", event => {
if (event.key === "Escape") closePanel();
});
Rules that matter
Make interaction predictable.
Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.
Use addEventListener
It keeps behavior in JavaScript and allows multiple listeners.
Choose the right event
click, input and submit mean different things.
Keep handlers small
Move larger behavior into named functions.
Respect default behavior
Only preventDefault when you replace the default action.
Update visible state
Events should produce clear feedback when users act.
Avoid duplicate listeners
Register listeners once during setup.
Production thinking
Strong event handling makes an interface feel reliable instead of accidental.
Why does this matter?
Events are how static pages become interactive applications.
Accessibility
Use real controls such as buttons and form fields so keyboard and assistive technology events work naturally.
Production note
Production event code should be registered once, scoped to the feature and easy to remove when needed.
SEO note
Navigation and content should not depend only on custom click handlers when real links would be more crawlable.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Change click to dblclick.
- Add an input event that mirrors typed text.
- Reset the counter after five clicks.
Practice assignment
Do this before moving to the next topic.
- Register one click listener.
- Update text from the handler.
- Explain which event fired and why.
Try it yourself
Respond to a click event
Self-check
Before you continue, prove that you understand Events.
If you can explain what fires, where it fires and what default behavior remains, you understand the interaction.
- Can you explain what an event is?
- Can you explain event listeners?
- Can you explain click versus input?
- Can you explain why inline handlers are weaker?
- Can you explain when preventDefault is needed?