14/03/2026
*๐ JavaScript Events*
Events make websites interactive. They allow JavaScript to respond to user actions like clicking a button, submitting a form, or typing in an input field.
Example actions:
- Clicking a button
- Submitting a form
- Hovering over an element
- Typing in a textbox
JavaScript listens for these actions and runs code when they happen.
*๐น 1. What is an Event?*
An event is an action that occurs in the browser.
Examples:
- click
- submit
- change
- update
Example:
button.addEventListener("click", function(){
console.log("Button clicked");
});
When the button is clicked โ the function runs.
*๐น 2. Event Listener*
The most common way to handle events.
Syntax:
element.addEventListener("event", function);
Example:
document.getElementById("btn")
.addEventListener("click", () => {
alert("Button clicked!");
});
*๐น 3. Common JavaScript Events*
- click: When user clicks an element
- submit: When form is submitted
- change: When input value changes
- keydown: When a key is pressed
- mouseover: When mouse enters element
Example:
input.addEventListener("change", function(){
console.log("Value changed");
});
*๐น 4. Event Object*
When an event occurs, JavaScript creates an event object containing information about the event.
Example:
button.addEventListener("click", function(event){
console.log(event);
});
The event object contains details like:
- target element
- mouse position
- key pressed
*๐น 5. Event Bubbling*
Events propagate from the child element to the parent element.
Example:
button โ div โ body โ html
If a button inside a div is clicked, the event may trigger on:
- button
- div
- body
This is called event bubbling.
*๐น 6. Event Delegation*
Instead of attaching events to many elements, attach one event to the parent element.
Example:
document.querySelector("ul")
.addEventListener("click", function(event){
console.log(event.target);
});
Benefits:
- Better performance
- Handles dynamically added elements
*โญ Most Important Event Concepts*
Focus on these first:
โ
click event
โ
addEventListener()
โ
event object
โ
event bubbling
โ
event delegation
These are used in almost every JavaScript project.
*๐ฏ Real Example*
HTML:
Click Me
JavaScript:
document.getElementById("btn")
.addEventListener("click", () => {
alert("Hello!");
});
๐ When the user clicks the button โ alert appears.
*Double Tap โฅ๏ธ For More*
