element.addEventListener() Add event listener
Last updated: 2026-09-09
element.addEventListener() Add event listener
addEventListener attaches an event handler — the standard way to handle DOM events.
| Category | DOM |
|---|---|
| ES version | DOM |
📝 Syntax
el.addEventListener('click', handler);⚙️ Parameters
| type | Event type like 'click', 'input', 'submit'. |
|---|---|
| listener | The callback to run when the event fires. |
Returns：undefined.
Mutates the original：No (returns a new value)
▶ Example
Edit the code, press Run, and see the result in the output panel:
Output：
clicked💡 Tip addEventListener supports multiple listeners of the same type.
💡 Tip Event delegation: listen on parent, check event.target.
🌐 Browser support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| element.addEventListener() | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported by all modern browsers | |||||
🏷️ Related Items
💡 Related Cases
More case studies coming soon — check back later.
📚 Related Tutorials
❓ FAQ
QaddEventListener vs onclick?
AaddEventListener supports multiple; onclick is single and overwritable.
QHow to remove a listener?
AremoveEventListener with the same function reference.
QWhat is event delegation?
AListen on parent, use event.target — good for dynamic children.
