JavaScript events are actions or occurrences that happen in a webpage and can be detected by JavaScript. Events allow websites to respond to user interactions such as clicking a button, typing text, submitting a form, moving the mouse, or loading a webpage.
Events are one of the most important concepts in JavaScript because they make webpages interactive and dynamic. Without events, websites would only display fixed information and users could not interact with webpage elements.
Modern web applications such as online shopping websites, social media platforms, banking systems, and web games heavily depend on JavaScript events.
An event is a signal generated by the browser when something happens on a webpage. JavaScript can detect these signals and execute specific code in response.
For example, when a user clicks a login button, a click event occurs. JavaScript can handle this event and verify the user's information.
Button Clicked
Events allow developers to create interactive experiences where webpages respond according to user actions.
JavaScript handles events using event handlers. An event handler is a block of code that runs when a specific event occurs.
The browser continuously monitors user actions. When an event happens, JavaScript executes the related event handler.
JavaScript provides many types of events. The most commonly used events are:
| Event Type | Description |
|---|---|
| Mouse Events | Triggered by mouse actions. |
| Keyboard Events | Triggered by keyboard actions. |
| Form Events | Related to form operations. |
| Window Events | Related to browser window actions. |
| Clipboard Events | Related to copy and paste operations. |
There are different ways to handle events in JavaScript.
In this method, event code is written directly inside the HTML element.
Events can be assigned using JavaScript properties.
let button = document.getElementById("btn");
button.onclick = function()
{
alert("Button Clicked");
}
The modern and recommended method for handling events is the addEventListener() method.
element.addEventListener(event, function);
let button = document.getElementById("btn");
button.addEventListener("click",function()
{
alert("Clicked");
});
Mouse events occur when a user performs actions using a mouse or touch device.
| Event | Description |
|---|---|
| click | Occurs when an element is clicked. |
| dblclick | Occurs when an element is double clicked. |
| mouseover | Occurs when mouse moves over an element. |
| mouseout | Occurs when mouse leaves an element. |
| mousedown | Occurs when mouse button is pressed. |
| mouseup | Occurs when mouse button is released. |
The click event occurs when a user clicks on an HTML element.
Button clicked
The dblclick event occurs when an element is clicked twice quickly.
The mouseover event occurs when the mouse pointer enters an element.
Move mouse here
The mouseout event occurs when the mouse pointer leaves an element.
Move mouse away
Keyboard events occur when a user interacts with a webpage using the keyboard. These events are commonly used for handling user input, search boxes, shortcuts, games, and form validation.
JavaScript provides different keyboard events to detect when keys are pressed or released.
| Event | Description |
|---|---|
| keydown | Occurs when a keyboard key is pressed. |
| keyup | Occurs when a keyboard key is released. |
| keypress | Occurs when a character key is pressed. |
The keydown event is triggered when a user presses any key on the keyboard.
document.addEventListener("keydown",function()
{
console.log("Key Pressed");
});
Key Pressed
The keyup event occurs when the user releases a pressed key.
document.addEventListener("keyup",function()
{
console.log("Key Released");
});
Key Released
JavaScript allows developers to identify which key was pressed using the event object.
document.addEventListener("keydown",function(event)
{
console.log(event.key);
});
If the user presses the A key, the output will be:
A
Whenever the user types something, the updated value is displayed.
Form events are generated when users interact with HTML forms. They are mainly used for form validation, data processing, and improving user experience.
| Event | Description |
|---|---|
| submit | Occurs when a form is submitted. |
| change | Occurs when the value of an element changes. |
| input | Occurs when user enters data. |
| focus | Occurs when an element gets focus. |
| blur | Occurs when an element loses focus. |
The submit event occurs when a user submits a form.
It is commonly used to validate form data before sending it to a server.
The preventDefault() method prevents the default action of an event.
For example, when a form is submitted, the browser normally reloads the page. This method stops that behavior.
event.preventDefault();
The change event occurs when the value of an input element is changed and the user moves away from that element.
The input event occurs immediately whenever the user enters or modifies data inside an input field.
The focus event occurs when an element becomes active.
It is commonly used to highlight input fields.
The blur event occurs when an element loses focus.
It is often used for validation after the user completes entering data.
Window events are related to browser window activities such as loading a page, resizing the browser, and scrolling.
| Event | Description |
|---|---|
| load | Runs when webpage completely loads. |
| resize | Occurs when browser size changes. |
| scroll | Occurs when page scrolling happens. |
| unload | Occurs when page is closed. |
The load event executes when all webpage resources such as images, CSS, and scripts are completely loaded.
window.addEventListener("load",function()
{
alert("Page Loaded");
});
The resize event occurs when the browser window size changes.
window.addEventListener("resize",function()
{
console.log("Window Resized");
});
The scroll event occurs when the user scrolls the webpage.
window.addEventListener("scroll",function()
{
console.log("Scrolling");
});
The event object contains information about an event that has occurred.
It is automatically passed to the event handler function.
button.addEventListener("click",
function(event)
{
console.log(event);
});
| Property | Description |
|---|---|
| event.type | Returns event name. |
| event.target | Returns the element that triggered event. |
| event.key | Returns pressed keyboard key. |
| event.clientX | Returns mouse X position. |
| event.clientY | Returns mouse Y position. |
document.addEventListener("click",
function(event)
{
console.log(event.type);
});
click
Event bubbling is a process where an event starts from the target element and then moves upward through its parent elements.
In simple words, when an event occurs on a child element, the same event can also be detected by its parent elements.
<div id="parent">
Parent Element
<button id="child">
Click Me
</button>
</div>
<script>
document.getElementById("child")
.addEventListener("click",function()
{
alert("Button Clicked");
});
document.getElementById("parent")
.addEventListener("click",function()
{
alert("Parent Clicked");
});
</script>
Button Clicked Parent Clicked
When the button is clicked, first the button event executes and then the parent event executes.
Event capturing is the opposite process of event bubbling. In capturing, the event starts from the top-level parent element and moves toward the target element.
Event capturing is also called the trickling phase.
element.addEventListener( event, function, true );
The third parameter true enables event capturing.
| Event Bubbling | Event Capturing |
|---|---|
| Event moves from child to parent. | Event moves from parent to child. |
| Default behavior in JavaScript. | Needs to be enabled manually. |
| Called bubbling phase. | Called capturing phase. |
| Commonly used in applications. | Used for special event handling. |
Sometimes developers do not want an event to move from one element to another. JavaScript provides the stopPropagation() method for this purpose.
button.addEventListener("click",
function(event)
{
event.stopPropagation();
alert("Button Event");
});
After using stopPropagation(), the event will not move to parent elements.
Event delegation is a technique where a single event handler is added to a parent element instead of adding separate handlers to multiple child elements.
It works because of event bubbling.
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<script>
document.getElementById("menu")
.addEventListener("click",function(event)
{
alert(event.target.innerHTML);
});
</script>
Home About Contact
Mouse events provide additional information through the event object.
| Property | Description |
|---|---|
| clientX | Mouse position from left side of browser. |
| clientY | Mouse position from top side of browser. |
| button | Returns mouse button information. |
| target | Returns clicked element. |
document.addEventListener("mousemove",
function(event)
{
console.log(
event.clientX,
event.clientY
);
});
The browser displays the current mouse coordinates.
JavaScript allows developers to create their own custom events according to application requirements.
Custom events are useful when different parts of an application need to communicate with each other.
let myEvent = new Event("message");
document.dispatchEvent(myEvent);
document.addEventListener(
"message",
function()
{
console.log("Custom Event Executed");
});
Custom Event Executed
Hello User
Welcome JavaScript
This type of event is commonly used in login forms.
Events are the foundation of interactive web applications. Almost every modern website uses events.
JavaScript events allow webpages to respond to user actions and browser activities. Events make websites interactive, dynamic, and user-friendly.
Important event concepts include mouse events, keyboard events, form events, window events, event objects, bubbling, capturing, delegation, and custom events.
A strong understanding of JavaScript events helps developers create modern web applications with better user interaction and improved functionality.