An event in JavaScript is an action or occurrence that takes place in the browser and
can be responded to using code.
Common events include click, hover, keypress,
submit, and more.
JavaScript allows you to "listen" for these events using an event listener.
An event in JavaScript is any action or occurrence that happens in the browser, which the program can detect and respond to.
Events represent interactions between the user, the browser, or the system — such as clicking a button, pressing a key, moving the mouse, submitting a form, or loading a page.
An event is like a signal that tells your JavaScript code —
“Hey, something just happened! Do you want to react to it?”
addEventListener() method to attach an event to an element.document.getElementById("btn").addEventListener("click", function() {
alert("Button was clicked!");
});Events can be grouped based on their purpose. Below is a categorized table of common events:
| Category | Event | Description |
|---|---|---|
| Mouse Events | click | Fires when an element is clicked |
| dblclick | Fires when an element is double-clicked | |
| mouseover | Triggered when the mouse enters an element | |
| mouseout | Triggered when the mouse leaves an element | |
| mousedown | When the mouse button is pressed down | |
| mouseup | When the mouse button is released | |
| Keyboard Events | keydown | When a key is pressed |
| keyup | When a key is released | |
| keypress | When a key is pressed and released | |
| Form Events | submit | Triggered when a form is submitted |
| change | When an input's value changes | |
| focus | When an element gains focus | |
| blur | When an element loses focus | |
| Window Events | load | Fires when the page has loaded |
| resize | Fires when the browser window is resized | |
| scroll | Fires when the user scrolls the page |
Events are essential for making web pages interactive and dynamic. Mastering event handling allows you to build rich user interfaces.