Day 14 Event Listeners
Events user actions hain — click, type, scroll, hover. addEventListener se inhe handle karte hain aur website interactive banti hai.
addEventListener
Events sun'ne ke liye addEventListener use karo.
let btn = document.getElementById("myBtn");
// Click event
btn.addEventListener("click", function() {
console.log("Button clicked!");
});
// Arrow function version
btn.addEventListener("click", () => {
alert("You clicked me!");
});
// Event object
btn.addEventListener("click", (event) => {
console.log("Click position:", event.clientX, event.clientY);
console.log("Target element:", event.target);
});
Common Events
Zaroori events jo roz use hote hain.
let input = document.getElementById("myInput");
// Typing events
input.addEventListener("input", (e) => {
console.log("Current value:", e.target.value);
});
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") {
console.log("Enter pressed!");
}
});
// Form submit
let form = document.getElementById("myForm");
form.addEventListener("submit", (e) => {
e.preventDefault(); // page reload mat karo
let formData = new FormData(form);
console.log("Form submitted!");
});
// Hover
let card = document.querySelector(".card");
card.addEventListener("mouseenter", () => card.classList.add("hover"));
card.addEventListener("mouseleave", () => card.classList.remove("hover"));
🎯 Practice Challenge
Counter app banao: + button se count increase, - button se decrease. Count 0 se neechay na jaaye.