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

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

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

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

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

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

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

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

elem.addEventListener('blur', func);

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

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

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

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

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

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

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

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

একটি ইনপুট দেওয়া আছে। এই ইনপুটটি ফোকাস পাওয়ার সময় এতে 1 সংখ্যাটি লিখুন, এবং ফোকাস হারানোর সময় - 2 সংখ্যাটি লিখুন। ফাংশন হ্যান্ডলারের ভিতরে ইনপুট অ্যাক্সেস করার জন্য this অবজেক্ট ব্যবহার করুন।

একটি বাটন দেওয়া আছে, যার মান হল 1 সংখ্যা। এটি এমনভাবে করুন যাতে এই বাটনে ক্লিক করলে এর মান প্রতিবার এক করে বাড়ে।