DOM Manipulation
Event Handling
addEventListener, click, submit
💡 Events ek doorbell system jaisa hai — jab koi button dabaता hai (click event), tumhara "listener" (function) sun leta hai aur react karta hai. addEventListener() ek doorbell install karne jaisa hai.
addEventListener(eventType, callback) kisi element par "listener" attach karta hai — jab specified event (click, submit, keydown, etc.) hota hai, callback function chalता hai. Ye modern, preferred approach hai (purana onclick="..." HTML attribute avoid karo).
const button = document.querySelector("#myButton");
button.addEventListener("click", function() {
console.log("Button clicked!");
});
// Arrow function ke saath (modern style):
button.addEventListener("click", () => {
console.log("Clicked again!");
});
// Form submission:
const form = document.querySelector("#myForm");
form.addEventListener("submit", (event) => {
event.preventDefault(); // default form-submit (page reload) rokta hai
console.log("Form submitted, page reload nahi hua!");
});👆
Events ek doorbell system jaisa hai — jab koi button dabaता hai (click event), tumhara "listener" (function) sun leta hai aur react karta hai. addEventListener() ek doorbell install karne jaisa hai.
1 / 6
⚡ Quick Recap
- addEventListener(type, callback) = modern, preferred event handling
- click, submit, keydown, mouseover — common event types
- event.preventDefault() = default browser behavior rokta hai
On this page (2 subtopics)
removeEventListener() se listener hata sakte ho — lekin EXACTLY wahi function reference chahiye jo add kiya tha (anonymous functions/arrow functions inline remove nahi ho sakte, function ko naam dena padta hai).
function handleClick() {
console.log("Clicked!");
}
button.addEventListener("click", handleClick);
// Baad mein:
button.removeEventListener("click", handleClick); // sahi tareeka — same reference
// Ye KAAM NAHI karega (naya function reference hai):
// button.addEventListener("click", () => console.log("x"));
// button.removeEventListener("click", () => console.log("x")); // DIFFERENT function!Tip: Memory leaks avoid karne ke liye event listeners cleanup karna important hai, especially Single Page Applications (React jaisa) mein jaha components baar-baar mount/unmount hote hain.
keydown/keyup events keyboard input capture karte hain — event.key se konsi key dabi ye pata chalta hai, common use-case: keyboard shortcuts, form validation, search-as-you-type.
document.addEventListener("keydown", (e) => {
console.log("Key pressed: " + e.key);
if (e.key === "Enter") {
console.log("Enter dabaya gaya!");
}
if (e.ctrlKey && e.key === "s") {
e.preventDefault(); // browser ka default "Save Page" rokna
console.log("Custom save triggered!");
}
});Tip: e.ctrlKey/e.shiftKey/e.altKey se modifier keys check kar sakte ho — keyboard shortcuts (jaise Ctrl+S) implement karne ke liye zaroori.