onclick
Runs code when an element is clicked.
Platform under construction
HTML Event Handler Attributes
Learn onclick, onchange, onsubmit, oninput as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.
Events
Event handler attributes exist, but they are usually not the clean production choice.
HTML supports attributes such as onclick, onchange and onsubmit. They run JavaScript when events happen. They are easy to understand in tiny demos, but they mix structure and behavior.
In real projects, keep HTML as structure and attach behavior from JavaScript with addEventListener. That keeps code easier to maintain, test and secure.
Attribute group:
onclick, onchange, onsubmit, oninput. Inline event attributes and why production code usually prefers JavaScript listeners. What belongs here
Learn attributes by purpose, not by memorizing random names.
onchange
Runs code when a form value changes.
oninput
Runs code while an input changes.
onsubmit
Runs code when a form submits.
addEventListener
The JavaScript-first alternative used in production code.
data-action
A clean HTML hook that JavaScript can read.
Syntax in context
Inline event attributes mix HTML and JavaScript.
They are useful to recognize, but production code is usually cleaner when behavior is attached from JavaScript.
<button type="button" data-action="save">
Save
</button>
<script>
document.querySelector("[data-action=save]").addEventListener("click", saveLesson);
</script>
Good versus weak
Small attribute choices can change behavior, accessibility and security.
Good
<button type="button" data-action="save">
Save
</button>
<script>
document.querySelector("[data-action=save]").addEventListener("click", saveLesson);
</script>
Weak
<button onclick="saveLesson(); alert('saved')">
Save
</button>
Rules that matter
Use these rules before publishing real HTML.
Recognize inline handlers
You will see them in old code and simple examples.
Prefer addEventListener
It separates behavior from markup and scales better.
Use data hooks
data-action can describe intent without tying HTML to a function name.
Avoid inline JavaScript strings
They are harder to lint, test and secure.
Production thinking
Attributes are tiny pieces of HTML with real product impact.
Why does this matter?
Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.
Accessibility
Event behavior must work with keyboard interaction too. Native buttons and form events make this easier.
Production note
Moving behavior to JavaScript files improves maintainability and makes CSP security policies easier to use.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
A clean hook for JavaScript
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?