এই পোস্টটি 'event.target' এবং জাভাস্ক্রিপ্টে এর ব্যবহার ব্যাখ্যা করবে।
জাভাস্ক্রিপ্টে 'event.target' কি?
দ্য ' ঘটনা।লক্ষ্য ' হল ' এর একটি বৈশিষ্ট্য/ বৈশিষ্ট্য ঘটনা 'জাভাস্ক্রিপ্টে। এটি সেই উপাদানটিকে বোঝায় যা ইভেন্টটিকে ট্রিগার করেছে। Event.target অ্যাট্রিবিউট অ্যাক্সেস করতে, উপাদানের ইভেন্ট শুনতে হবে। দ্য ' AddEventListener() ” পদ্ধতিটি নির্দিষ্ট ঘটনা শোনার জন্য ব্যবহার করা হয়।
বাক্য গঠন
'event.target' বৈশিষ্ট্য ব্যবহার করার জন্য, প্রদত্ত সিনট্যাক্স অনুসরণ করুন:
উপাদান AddEventListener ( '<ইভেন্ট>' , ফাংশন ( ঘটনা ) {
কনসোল লগ ( ঘটনা লক্ষ্য )
} )
প্রদত্ত সিনট্যাক্সে,
- দ্য ' AddEventListener() ” পদ্ধতিটি নির্দিষ্ট উপাদানের জন্য একটি ইভেন্ট হ্যান্ডলার যোগ করার জন্য ব্যবহৃত হয়।
- ' <ইভেন্ট> ” যে কোন ঘটনাকে নির্দেশ করে, যেমন “ ক্লিক ', ' মাউসওভার ”, এবং তাই।
উদাহরণ
প্রদত্ত উদাহরণে, আমরা এমন উপাদান পাব যা ইভেন্টটিকে ট্রিগার করেছে “ ঘটনা।লক্ষ্য 'সম্পত্তি।
এখানে, আমরা একটি আইডি বরাদ্দ করে একটি বোতাম তৈরি করব “ বিটিএন ' যা জাভাস্ক্রিপ্টে বোতামটি অ্যাক্সেস করার জন্য ব্যবহৃত হয়:
< বোতাম আইডি = 'বিটিএন' > এখানে ক্লিক করুন বোতাম >
জাভাস্ক্রিপ্ট ফাইলে, প্রথমে, আমরা 'এর সাহায্যে তার নির্ধারিত আইডি ব্যবহার করে বোতামটির রেফারেন্স পাব। getElementById() 'পদ্ধতি:
const বোতাম = নথি getElementById ( 'বিটিএন' ) ;বোতাম দিয়ে একটি ইভেন্ট লিসেনার সংযুক্ত করুন। দ্য ' ক্লিক ' ইভেন্টটি বোতামের ক্লিকে শুরু হয় এবং ইভেন্ট অবজেক্টটি ইভেন্ট শ্রোতার কাছে একটি যুক্তি হিসাবে প্রেরণ করা হয়। দ্য ' ঘটনা।লক্ষ্য ইভেন্টটি ট্রিগারকারী বোতাম উপাদানটির একটি রেফারেন্স পেতে শ্রোতা ফাংশন থেকে বৈশিষ্ট্যটি অ্যাক্সেসযোগ্য:
বোতাম AddEventListener ( 'ক্লিক' , ফাংশন ( ঘটনা ) {কনসোল লগ ( 'টার্গেট ইভেন্ট:' , ঘটনা। লক্ষ্য ) ;
} ) ;
আউটপুটটি ক্লিক করা নির্দিষ্ট বোতামের রেফারেন্স দেখায়:
আপনি আরও তথ্য পেতে পারেন এবং এর বৈশিষ্ট্যগুলি ব্যবহার করে লক্ষ্যযুক্ত ইভেন্টে স্টাইলিংয়ের মতো বিভিন্ন কার্যকারিতা প্রয়োগ করতে পারেন।
'event.target' এর বৈশিষ্ট্যগুলি কী কী?
'event.target' বৈশিষ্ট্যের বিভিন্ন বৈশিষ্ট্য রয়েছে যা লক্ষ্য উপাদান সম্পর্কে তথ্য প্রদান করে। event.target অবজেক্টের কয়েকটি সাধারণ বৈশিষ্ট্য নিম্নরূপ:
| event.target বৈশিষ্ট্য | বর্ণনা |
| event.target.tagname | পাওয়ার জন্য ব্যবহৃত ' নাম ” টার্গেট এলিমেন্টের HTML ট্যাগের। |
| event.target.value | পুনরুদ্ধারের জন্য ব্যবহার করুন ' মান লক্ষ্য উপাদানের। এই বৈশিষ্ট্যটি বেশিরভাগ ইনপুট উপাদানগুলির জন্য ব্যবহৃত হয়। |
| event.target.id | পাওয়ার জন্য ' আইডি লক্ষ্য উপাদানের বৈশিষ্ট্য, প্রদত্ত বৈশিষ্ট্যটি ব্যবহার করুন। |
| event.target.classList | তালিকা ' ক্লাস ” টার্গেট উপাদান ধারণকারী এই বৈশিষ্ট্য দ্বারা অ্যাক্সেস করা হয়. |
| event.target.textContent | পাওয়ার জন্য ব্যবহৃত ' পাঠ্য বিষয়বস্তু লক্ষ্য উপাদানের। |
| event.target.href | এই বৈশিষ্ট্যটি পুনরুদ্ধার করে ' href টার্গেট এলিমেন্টের অ্যাট্রিবিউট, যেমন লিঙ্ক। |
| event.target.style | পরিবর্তন করার জন্য ' সিএসএস লক্ষ্য উপাদানের বৈশিষ্ট্য, এই বৈশিষ্ট্যটি ব্যবহার করুন। |
উদাহরণ 1: টার্গেট এলিমেন্টের পটভূমির রঙ পরিবর্তন করুন
প্রদত্ত উদাহরণে, আমরা লক্ষ্য উপাদানটির পটভূমির রঙ পরিবর্তন করব “ শৈলী 'এর উপর বৈশিষ্ট্য' ক্লিক ঘটনা:
const বোতাম = নথি getElementById ( 'বিটিএন' ) ;বোতাম AddEventListener ( 'ক্লিক' , ফাংশন ( ঘটনা ) {
ঘটনা লক্ষ্য . শৈলী . পেছনের রং = 'নীল' ;
} ) ;
আউটপুট
উদাহরণ 2: লক্ষ্য উপাদানের মান পান
একটি ইনপুট পাঠ্য ক্ষেত্র এবং
ট্যাগ ব্যবহার করে পাঠ্য দেখানোর জন্য একটি এলাকা তৈরি করুন। ইনপুট ক্ষেত্রে আইডি বরাদ্দ করুন এবং
ট্যাগ হিসাবে “ ইনপুট নিন ' এবং ' দেখান ', যথাক্রমে:
< ইনপুট টাইপ = 'পাঠ্য' আইডি = 'টেকইনপুট' >< পি আইডি = 'দেখানো' >> পি >
' ব্যবহার করে পাঠ্য ক্ষেত্রের রেফারেন্স পান getElementById() 'পদ্ধতি:
ইনপুট ছিল = নথি getElementById ( 'টেকইনপুট' ) ;ব্যবহার ' মান 'এর সাথে বৈশিষ্ট্য ঘটনা।লক্ষ্য লক্ষ্যযুক্ত উপাদানের মান পেতে:
ইনপুট. AddEventListener ( 'ইনপুট' , ( ঘটনা ) => {নথি getElementById ( 'দেখানো' ) . innerHTML = ঘটনা লক্ষ্য . মান ;
} )
আপনি দেখতে পাচ্ছেন যে টেক্সট বাক্সে প্রবেশ করা মানটি '' ব্যবহার করে সফলভাবে পুনরুদ্ধার করা হয়েছে মান ' বৈশিষ্ট্য:
এটি জাভাস্ক্রিপ্টের 'event.target' সম্পর্কে ছিল।
উপসংহার
দ্য ' ঘটনা।লক্ষ্য ” ইভেন্টটিকে ট্রিগার/সূচনাকারী উপাদানকে বোঝায়। 'event.target' বৈশিষ্ট্যের কিছু বৈশিষ্ট্য রয়েছে যা লক্ষ্য উপাদান সম্পর্কে তথ্য প্রদান করে। এই ক্ষেত্রে, ' event.target.tagname ', ' মান ', ' .id ', ' .স্টাইল ”, এবং তাই। এই পোস্টটি 'event.target', এর গুণাবলী এবং জাভাস্ক্রিপ্টে এর ব্যবহার চিত্রিত করেছে।