TypeScript में Event Handling
element.addEventListener("eventName", (event: EventType) => {
// handle event
});Click Events
एक click handler का event parameter MouseEvent typed है, जो आपको coordinates और modifier-key state (जैसे event.shiftKey) तक पूरे autocomplete के साथ access देता है, एक untyped generic Event के बजाय।
उदाहरण: Click Events
const button = document.createElement("button");
button.addEventListener("click", (event: MouseEvent) => {
console.log("Clicked at", event.clientX, event.clientY);
});
button.dispatchEvent(new MouseEvent("click", { clientX: 10, clientY: 20 }));Keyboard Events
Keyboard event handlers एक KeyboardEvent receive करते हैं, जिसके .key और .code properties आपको exactly बताते हैं कौन सी key press हुई, जो MouseEvent और दूसरे event types बिल्कुल expose नहीं करते।
उदाहरण: Keyboard Events
document.addEventListener("keydown", (event: KeyboardEvent) => {
console.log("Key pressed:", event.key);
});
document.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));Input Events
Form fields पर Input events Event typed हैं जिसका target HTMLInputElement जैसी किसी चीज़ में narrow किया गया है, क्योंकि base Event type अकेले नहीं जानता कि यह .value property वाले एक input से attached है।
उदाहरण: Input Events
const input = document.createElement("input");
input.addEventListener("input", (event: Event) => {
const target = event.target as HTMLInputElement;
console.log("Value is now:", target.value);
});
input.value = "hi";
input.dispatchEvent(new Event("input"));Event Targets
event.target generically EventTarget | null typed है, इसलिए इस पर एक DOM-specific property पढ़ने के लिए आप वास्तव में जिस concrete element type से event आने की उम्मीद करते हैं उसमें narrowing या casting चाहिए।
उदाहरण: Event Targets
document.addEventListener("click", (event: Event) => {
const target = event.target as HTMLElement | null;
console.log("Clicked element:", target?.tagName);
});
document.dispatchEvent(new MouseEvent("click"));Event Listeners हटाना
removeEventListener को वही exact function reference pass करना चाहिए जो addEventListener के साथ register किया गया था, इसलिए एक inline anonymous arrow function बाद में कभी remove नहीं किया जा सकता — अगर इसे detach करना है तो handler को एक named variable में store करें।
उदाहरण: Removing Event Listeners
function handleClick() {
console.log("Handled");
}
const button = document.createElement("button");
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);
console.log("Listener removed using the same named function reference");- एक input handler को
MouseEventtyped करना, या एक click event सेevent.keyपढ़ना, जहां वे properties मौजूद नहीं हैं। event.target.valuedirectly उपयोग करना, जबtargetEventTarget | nullहै और narrowing चाहिए।- Callback को गलत event name string के साथ typed करना, इसलिए event type match नहीं करता, जैसे एक
KeyboardEventके साथ"click"।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: