জাভাস্ক্রিপ্টে this অবজেক্ট

এখন আমরা ইভেন্ট হ্যান্ডলার ফাংশনে উপলব্ধ বিশেষ অবজেক্ট this নিয়ে কাজ করব। এই অবজেক্টটি সেই এলিমেন্টকে নির্দেশ করে যেখানে ইভেন্টটি ঘটেছে।

this অবজেক্টটি সুবিধাজনক যখন যে এলিমেন্টে ইভেন্টটি ঘটেছে এবং যে এলিমেন্টের উপর ইভেন্টের ফলস্বরূপ কাজ করা হয় - তা একই এলিমেন্ট হয়।

উদাহরণস্বরূপ, আমাদের যদি একটি ইনপুট থাকে, আমরা এটিতে একটি ব্লার ইভেন্ট হ্যান্ডলার বাঁধতে পারি এবং এই ইভেন্ট ঘটলে ইনপুটের টেক্সটের সাথে কিছু করতে পারি। আসুন বর্ণিত কাজটি করি। ধরুন আমাদের একটি ইনপুট দেওয়া আছে:

html<input id="elem" value="text">

আসুন এটিকে একটি ভেরিয়েবল elem-এ রেফারেন্স পাই:

javascriptlet elem = document.querySelector('#elem');

এটিতে একটি blur ইভেন্ট হ্যান্ডলার ফাংশন বাঁধুন:

javascriptelem.addEventListener('blur', func);

এই func ফাংশনের ভিতরে this অবজেক্টটি অ্যাক্সেসযোগ্য হবে, যা আমাদের ইনপুটকে নির্দেশ করে:

javascriptfunction func() {
  console.log(this); // আমাদের এলিমেন্টের রেফারেন্স ধারণ করে
}

আমাদের ইনপুটের value অ্যাট্রিবিউটের বিষয়বস্তু আউটপুট করি:

javascriptfunction func() {
  console.log(this.value); // অ্যাট্রিবিউটের বিষয়বস্তু আউটপুট করব
}

আচ্ছা, এখন ইনপুটে কিছু টেক্সট লিখি:

javascriptfunction func() {
  this.value = '!!!';
}

অ্যানোনিমাস ফাংশনও ব্যবহার করা যেতে পারে:

javascriptelem.addEventListener('blur', function() {
  this.value = '!!!';
});