In JavaScript, events are actions or occurrences that happen in the browser, which can be triggered by user interactions or browser activities. These events can be anything from a user clicking a button, submitting a form, or moving the mouse over an element. JavaScript uses event handlers to react to these events and execute the corresponding code.
Event handling is the process of writing JavaScript code that will respond to events triggered by the user or the browser. By attaching event handlers to HTML elements, you can define what should happen when specific events occur.
Mouse events are triggered by user interactions with a mouse. They are essential for creating interactive web applications.
| Event | Description |
|---|---|
| click | Triggered when a mouse button is clicked. |
| dblclick | Triggered when a mouse button is double-clicked. |
| mouseover | Triggered when the mouse pointer moves over an element. |
| mouseout | Triggered when the mouse pointer leaves an element. |
| mousemove | Triggered when the mouse pointer moves within an element. |
| mousedown | Triggered when a mouse button is pressed down. |
| mouseup | Triggered when a mouse button is released. |
eyboard events occur when the user interacts with the keyboard.
| Event | Description |
|---|---|
| keydown | Triggered when a key is pressed down. |
| keyup | Triggered when a key is released. |
| keypress | Triggered when a key is pressed and released (deprecated). |
Form events are used to handle actions related to form elements, such as submission or changes in input fields.
| Event | Description |
|---|---|
| submit | Triggered when a form is submitted. |
| change | Triggered when the value of an input element changes. |
| focus | Triggered when an input element receives focus. |
| blur | Triggered when an input element loses focus. |
| input | Triggered when the value of an input element changes (real-time). |
These events are related to the window or document object and handle activities like loading, resizing, and more.
| Event | Description |
|---|---|
| submit | Triggered when a form is submitted. |
| change | Triggered when the value of an input element changes. |
| focus | Triggered when an input element receives focus. |
| blur | Triggered when an input element loses focus. |
| input | Triggered when the value of an input element changes (real-time). |
These events are related to the window or document object and handle activities like loading, resizing, and more.
| Event | Description |
|---|---|
| load | Triggered when the window or an image finishes loading. |
| resize | Triggered when the window is resized. |
| scroll | Triggered when the user scrolls the document. |
| unload | Triggered when the document or window is unloaded. |
| click | Triggered when a mouse button is clicked on the document. |
<!-- Button with onclick event -->
<button onclick="alert('Button clicked!')">Click me</button>
<!-- Input field with onchange event -->
<input type="text" onchange="alert('Value changed')">
<!-- Div with onmouseover and onmouseout events -->
<div
onmouseover="this.style.backgroundColor='yellow'"
onmouseout="this.style.backgroundColor='white'">
Hover over me
</div>
<!-- Input field with onkeydown and onkeyup events -->
<input type="text"
onkeydown="console.log('Key pressed')"
onkeyup="console.log('Key released')">
<!-- Form with onsubmit event -->
<form onsubmit="return validateForm()">
<input type="submit" value="Submit">
</form>
<!-- Input field with onfocus and onblur events -->
<input type="text"
onfocus="this.style.border='2px solid yellow'"
onblur="this.style.border='none'">
<script>
function validateForm() {
// Form validation logic
return true; // Allow form submission
}
</script>