টাইপস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং

এই আর্টিকেলটি টাইপস্ক্রিপ্টে ইভেন্ট পরিচালনা ব্যাখ্যা করে।

কোড উদাহরণের মাধ্যমে আপনি ইভেন্ট পরিচালনার পদ্ধতি এবং কাস্টম ইভেন্ট সম্পর্কে জানতে পারবেন।

YouTube Video

টাইপস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং

টাইপস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং জাভাস্ক্রিপ্টের মতোই করা হয়। তবে, টাইপস্ক্রিপ্ট টাইপ সেফটি বাড়ায় এবং উপযুক্ত ইভেন্ট টাইপ ব্যবহার করে নিরাপদে ইভেন্ট হ্যান্ডল করতে দেয়। ইভেন্ট হ্যান্ডলিংয়ের মূল বিষয় হল 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 ব্যবহার করা হয়েছে।

টাইপস্ক্রিপ্টে ইভেন্ট টাইপসমূহ

টাইপস্ক্রিপ্টে ইভেন্ট লিসনারে প্রাপ্ত event অবজেক্টে স্বয়ংক্রিয়ভাবে উপযুক্ত টাইপ নির্ধারিত হয়ে যায়। event অবজেক্টের বিভিন্ন বৈশিষ্ট্য থাকে ইভেন্ট টাইপ অনুযায়ী, তবে এর মূল টাইপ Event।

প্রত্যেক ইভেন্টের জন্য উপযুক্ত টাইপ ব্যবহার করলে টাইপস্ক্রিপ্টের টাইপ সেফটির সুবিধা নিতে পারবেন।

প্রধান ইভেন্ট টাইপসমূহ

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” দেখায়।

টাইপ অ্যাসারশন ব্যবহার করে কাস্টম ইভেন্ট হ্যান্ডলিং

কাস্টম ইভেন্ট অথবা টাইপস্ক্রিপ্টের টাইপ ইনফারেন্স কাজ না করলে আপনি টাইপ অ্যাসারশন ব্যবহার করে স্পষ্টভাবে টাইপ নির্ধারণ করতে পারেন।

উদাহরণস্বরূপ, নির্দিষ্ট ইনপুট ফিল্ড (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}

• এই কোড বোতামে ক্লিক ইভেন্ট লিসেনার যুক্ত করে এবং একই হ্যান্ডলার নির্দিষ্ট করে সেটি সরিয়ে ফেলে।

কাস্টম ইভেন্ট তৈরি করা

টাইপস্ক্রিপ্টে, স্ট্যান্ডার্ড ইভেন্ট ছাড়াও আপনি কাস্টম ইভেন্ট তৈরি ও চালাতে পারেন। 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}

• এই কোডটি বোতামে ক্লিক করলে ডিফল্ট অ্যাকশন বন্ধ করে, ইভেন্ট বাবলিং থামায় এবং কাস্টম প্রসেসিং চালায়।

সারসংক্ষেপ

টাইপস্ক্রিপ্টে ইভেন্ট হ্যান্ডলিং মূলত জাভাস্ক্রিপ্টের মতোই, তবে সঠিক টাইপ সংজ্ঞা দিয়ে আপনি নিরাপদ ও নির্ভরতাপূর্ণভাবে ইভেন্ট অবজেক্ট এবং DOM উপাদান নিয়ে কাজ করতে পারেন। ইভেন্ট লিসনার যোগ ও অপসারণ, ইভেন্ট টাইপ প্রয়োগ এবং টাইপ অ্যাসারশন ব্যবহারের মাধ্যমে আপনি আরও স্পষ্ট এবং কম ত্রুটিপূর্ণ ইভেন্ট হ্যান্ডলিং করতে পারবেন।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video