Events are actions that happen in the browser, such as a button click, mouse movement, or keyboard input.
<button id="myButton">Click Me</button>
// Get the reference of button in a variable
var button = document.getElementById("myButton");
// Attach an event handler to the button
button.addEventListener("click", handleClick);
// Event handler function
function handleClick() {
alert("button clicked");
}| Event Type | Description | Example |
|---|---|---|
| Click | Triggered when an element is clicked. | button.addEventListener('click', handleClick); |
| Mouseover | Triggered when the mouse pointer moves over an element. | element.addEventListener('mouseover', handleMouseOver); |
| Keydown | Triggered when a key is pressed down. | document.addEventListener('keydown', handleKeyDown); |
| Keyup | Triggered when a key is released. | document.addEventListener('keyup', handleKeyUp); |
| Submit | Triggered when a form is submitted. | form.addEventListener('submit', handleSubmit); |
| Focus | Triggered when an element gains focus. | input.addEventListener('focus', handleFocus); |
| Blur | Triggered when an element loses focus. | input.addEventListener('blur', handleBlur); |
| Change | Triggered when the value of an element changes. | input.addEventListener('change', handleChange); |
| Load | Triggered when a page or resource finishes loading. | window.addEventListener('load', handleLoad); |
Whenever any event is triggered, the browser automatically creates an event object and passes it as an argument to the event handler function. The event object contains
various properties and methods that provide information about the event, such as the type of event, the element that triggered the event, etc.
Example:
<button id="myButton">Click Me</button>// Get the button element
var button = document.getElementById("myButton");
// Attach event listener to the button element
button.addEventListener("click", handleClick);
// Event handler function
function handleClick(event) {
// Accessing properties of the event object
console.log("Event type:", event.type);
console.log("Target element:", event.target);
}Event delegation in JavaScript is a technique where you attach a single event handler to a parent element to handle events on its child elements.
Example:
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>var parentList = document.getElementById("myList");
// Attach event handler to parent element
parentList.addEventListener("click", handleItemClick);
// Event handler function
function handleItemClick(event) {
var target = event.target;
console.log("Clicked:", target.textContent);
}Event Bubbling
Event bubbling is the process in JavaScript where an event triggered on a child element propagates up the DOM tree, triggering event handlers on its parent elements.
Example:
<div id="outer">
<div id="inner">
<button id="myButton">Click Me</button>
</div>
</div>// Get the reference of elements
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var button = document.getElementById("myButton");
// Attach event handlers with elements
outer.addEventListener("click", handleBubbling);
inner.addEventListener("click", handleBubbling);
button.addEventListener("click", handleBubbling);
function handleBubbling(event) {
console.log("Bubbling: " + this.id);
}Event bubbling can be stopped by calling the stopPropagation() method on the event object.
Example:
<div id="outer">
<div id="inner">
<button id="myButton">Click Me</button>
</div>
</div>// Get the reference of elements
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var button = document.getElementById("myButton");
// Attach event handlers with elements
outer.addEventListener("click", handleBubbling);
inner.addEventListener("click", handleBubbling);
button.addEventListener("click", handleBubbling);
function handleBubbling(event) {
console.log("Bubbling: " + this.id);
event.stopPropagation(); // Stop event propagation
}Event Capturing
Event capturing is the process in JavaScript where an event is handled starting from the highest-level ancestor (the root of the DOM tree) and moving down to the target element.
Example:
<div id="outer">
<div id="inner">
<button id="myButton">Click Me</button>
</div>
</div>// Get the reference of elements
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var button = document.getElementById("myButton");
// Attach event handlers with elements (using capture phase)
outer.addEventListener("click", handleCapture, true);
inner.addEventListener("click", handleCapture, true);
button.addEventListener("click", handleCapture, true);
function handleCapture(event) {
console.log("Capturing: " + this.id);
}- The
event.preventDefault()method is used to prevent the default behavior of an event and the link click will be prevented.
<a href="https://example.com" id="myLink">Click Me</a>var link = document.getElementById('myLink');
link.addEventListener('click', handler);
function handler(event) {
event.preventDefault(); // Prevent default action
// Perform custom behavior
console.log('Clicked, default action prevented');
}The this keyword refers to the element that the event handler is attached to.
Example:
<button id="myButton">Click Me</button>var button = document.getElementById("myButton");
button.addEventListener("click", handler);
function handler(event) {
console.log("Clicked:", this.id);
this.disabled = true;
}removeEventListener() method is used to remove event handler from element.
// HTML element
<button id="myButton">Click Me</button>// Get the button element
var button = document.getElementById("myButton");
// Attach the event handler
button.addEventListener("click", handleClick);
// Function to handle the click event
function handleClick() {
console.log("Button clicked!");
}// Remove the event handler
button.removeEventListener("click", handleClick);