You are viewing a free preview of this lesson.
Subscribe to unlock all 10 lessons in this course and every other course on LearningBro.
Events are signals that something has happened in the browser — a user clicked a button, typed in a field, scrolled the page, or submitted a form. Event listeners let your JavaScript code respond to these signals and make web pages interactive.
An event is an object that represents an action or occurrence. Common event types include:
| Category | Events |
|---|---|
| Mouse | click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout |
| Keyboard | keydown, keyup, keypress (deprecated) |
| Form | submit, change, input, focus, blur |
| Window | load, resize, scroll, beforeunload |
| Touch | touchstart, touchmove, touchend |
| Drag | drag, dragstart, dragend, drop |
The recommended way to listen for events is addEventListener:
const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
console.log("Button was clicked!");
});
button.addEventListener("click", () => {
console.log("Clicked with arrow function!");
});
function handleClick() {
console.log("Clicked!");
}
button.addEventListener("click", handleClick);
Why named functions? You can remove the listener later —
button.removeEventListener("click", handleClick).
Subscribe to continue reading
Get full access to this lesson and all 10 lessons in this course.