An event is something that happens: a click, key press, mouse move, form submit, page load. An event handler (listener) is a function that runs when the event occurs.
JavaScript
const btn = document.getElementById('btn');
btn.addEventListener('click', function (event) {
console.log('Clicked!', event.target);
});
// Arrow-function version
btn.addEventListener('click', e => { /* ... */ });
// Named function (can be removed later)
function sayHi() { alert('Hi'); }
btn.addEventListener('click', sayHi);
btn.removeEventListener('click', sayHi);| Category | Events |
|---|---|
| Mouse | click, dblclick, mouseover, mouseout, mousemove, mousedown, mouseup |
| Keyboard | keydown, keyup |
| Form | submit, change, input, focus, blur, reset |
| Page | DOMContentLoaded, load, resize, scroll |
| Touch | touchstart, touchmove, touchend |
The event object carries details: event.target (element that triggered it), event.type, event.key (for keyboard), event.clientX and event.clientY (mouse position), event.preventDefault() (stop the default action, e.g. a form submit or link navigation).
Event bubbling and delegation. Events travel up from the clicked element through its parents. This lets you attach one listener to a parent and handle all its children:
JavaScript
document.getElementById('fruitList').addEventListener('click', e => {
if (e.target.tagName === 'LI') {
e.target.classList.toggle('done');
}
});Run code after the page loads:
JavaScript
document.addEventListener('DOMContentLoaded', () => {
// safe to access any element here
});Complete mini example: counter
HTML
<h2>Count: <span id='count'>0</span></h2>
<button id='plus'>+1</button>
<button id='reset'>Reset</button>
<script>
let count = 0;
const out = document.getElementById('count');
document.getElementById('plus').addEventListener('click', () => {
count++;
out.textContent = count;
});
document.getElementById('reset').addEventListener('click', () => {
count = 0;
out.textContent = count;
});
</script>