TypeScript में इवेंट हैंडलिंग

यह लेख TypeScript में इवेंट हैंडलिंग को समझाता है।

आप कोड उदाहरणों के माध्यम से इवेंट हैंडलिंग के तरीके और कस्टम इवेंट्स के बारे में जान सकते हैं।

YouTube Video

TypeScript में इवेंट हैंडलिंग

TypeScript में इवेंट हैंडलिंग उसी तरह से की जाती है जैसे JavaScript में। हालांकि, TypeScript प्रकार सुरक्षा में सुधार करता है, जिससे आप उपयुक्त इवेंट प्रकारों का उपयोग करके इवेंट्स को सुरक्षित रूप से संभाल सकते हैं। इवेंट हैंडलिंग के मूल में DOM तत्वों पर इवेंट श्रोता जोड़ना और उपयोगकर्ता की क्रियाओं के जवाब में क्रियाएं निष्पादित करना शामिल है।

इवेंट श्रोता जोड़ना

addEventListener विधि का उपयोग करके DOM तत्वों में इवेंट श्रोता जोड़े जाते हैं। उदाहरण के लिए, एक क्लिक इवेंट को संभालने के लिए आप निम्न करेंगे:।

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}

• इस कोड में, क्लिक इवेंट के लिए निर्दिष्ट DOM तत्व पर हैंडलर रजिस्टर करने के लिए addEventListener का उपयोग किया गया है।

TypeScript में इवेंट प्रकार

TypeScript में, इवेंट श्रोता में प्राप्त event ऑब्जेक्ट को स्वतः ही उपयुक्त प्रकार निर्दिष्ट किया जाता है। event ऑब्जेक्ट में इवेंट के प्रकार के आधार पर विभिन्न गुण होते हैं, लेकिन इसका मूल प्रकार Event है।

प्रत्येक इवेंट के लिए उपयुक्त प्रकार का उपयोग करके आप अपने विकास में TypeScript की प्रकार सुरक्षा का लाभ उठा सकते हैं।

मुख्य इवेंट प्रकार

1. Event Event सामान्य इवेंट्स के लिए मूल प्रकार है। इसका उपयोग फॉर्म सबमिशन या पृष्ठ लोडिंग पूर्ण होने जैसी चीजों के लिए किया जाता है।

1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}

• यह कोड फॉर्म के सबमिट इवेंट को पहचानता है, डिफॉल्ट सबमिट ऐक्शन को रोकता है, और उसकी बजाय कंसोल में एक संदेश दिखाता है।

2. MouseEvent

   MouseEvent एक इवेंट प्रकार है जो क्लिक और माउस मूवमेंट जैसी माउस क्रियाओं से संबंधित है। आप माउस समन्वय और कौन सा बटन क्लिक किया गया, इसकी जानकारी प्राप्त कर सकते हैं।

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}

• यह कोड बटन क्लिक होने पर माउस के निर्देशांक प्राप्त करता है और उन्हें कंसोल में दिखाता है।

3. KeyboardEvent KeyboardEvent एक इवेंट प्रकार है जो कीबोर्ड इनपुट से संबंधित है। आप दबाए गए कुंजी और संशोधक कुंजियों (Shift, Alt, Ctrl, आदि) की स्थिति प्राप्त कर सकते हैं।

1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});

• यह कोड दबाए गए बटन का नाम दिखाता है और अगर Ctrl बटन भी दबा है, तो वह जानकारी भी कंसोल में दर्शाता है।

4. InputEvent InputEvent एक इवेंट प्रकार है जो इनपुट फ़ील्ड में परिवर्तनों से संबंधित है। इसका उपयोग तब किया जाता है जब टेक्स्ट फील्ड या टेक्स्टएरिया का मान बदल गया हो।

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}

• यह कोड हर बार इनपुट फ़ील्ड की वैल्यू बदलने पर उसकी सामग्री को कंसोल में दिखाता है।

5. FocusEvent FocusEvent एक इवेंट प्रकार है जो तब होता है जब किसी एलिमेंट को फोकस मिलता है या वह फोकस खोता है।

 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}

• यह कोड इनपुट फ़ील्ड के फोकस होने पर कंसोल में "Focused" और फोकस हटने पर "Blurred" दिखाता है।

प्रकार अभिकथन के साथ कस्टम इवेंट्स को संभालना

कस्टम इवेंट्स या जब TypeScript की प्रकार अनुमान सही से काम नहीं करता है, तब आप प्रकार अभिकथन का उपयोग करके स्पष्ट रूप से प्रकार निर्दिष्ट कर सकते हैं।

उदाहरण के लिए, किसी विशिष्ट इनपुट फ़ील्ड (HTMLInputElement) के लिए इवेंट को संभालने के लिए प्रकार को निम्नानुसार निर्दिष्ट करें:।

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}

• यह कोड टाइप असर्शन का प्रयोग कर इवेंट टार्गेट को HTMLInputElement मानता है और उसकी वैल्यू कंसोल में दिखाता है।

इवेंट श्रोता हटाना

आप removeEventListener का उपयोग करके इवेंट श्रोता हटा सकते हैं। इसके लिए, आपको उसी इवेंट हैंडलर को पास करना होगा जो शुरू में जोड़ा गया था।

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}

• यह कोड बटन पर क्लिक इवेंट लिस्नर जोड़ता है, और फिर उसी हैंडलर को निर्दिष्ट कर उसे हटा देता है।

कस्टम इवेंट्स बनाना

TypeScript में, मानक इवेंट्स के अलावा आप कस्टम इवेंट्स भी बना और भेज सकते हैं। CustomEvent क्लास का उपयोग करके कस्टम इवेंट बनाएं और dispatchEvent विधि का उपयोग करके उसे ट्रिगर करें।

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}

• यह कोड CustomEvent का उपयोग कर एक कस्टम इवेंट बनाता है, उसे एलिमेंट में डिस्पैच करता है, और उसकी डिटेल्स कंसोल में दिखाता है।

इवेंट प्रसार को नियंत्रित करना

जब कोई इवेंट होता है, तो वह डिफ़ॉल्ट रूप से बबल (मूल तत्वों तक फैलता है) करता है। इसे रोकने के लिए event.stopPropagation() का उपयोग करें। आप ब्राउज़र के डिफ़ॉल्ट व्यवहार को रोकने के लिए preventDefault() का उपयोग कर सकते हैं।

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}

• यह कोड जब बटन क्लिक किया जाता है तो डिफॉल्ट ऐक्शन को रोकता है, इवेंट बबलिंग बंद करता है, और कस्टम प्रोसेसिंग करता है।

सारांश

TypeScript में इवेंट हैंडलिंग मूल रूप से JavaScript के समान है, लेकिन उचित प्रकार की परिभाषाओं के साथ आप इवेंट ऑब्जेक्ट्स और DOM तत्वों के साथ सुरक्षित और विश्वसनीय रूप से काम कर सकते हैं। इवेंट श्रोता जोड़कर और हटाकर, इवेंट प्रकार लागू करके, और प्रकार अभिकथन का उपयोग करके, आप स्पष्ट और कम त्रुटिपूर्ण इवेंट हैंडलिंग प्राप्त कर सकते हैं।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video