JavaScript-এ Event অবজেক্টে ইভেন্ট এলিমেন্ট

Event অবজেক্টটি ইভেন্টটি যে এলিমেন্টে ঘটেছে তাও পেতে দেয়। এই এলিমেন্টটি target প্রপার্টিতে রয়েছে। এটি কেন প্রয়োজন, যদি এই এলিমেন্টটি this-এ থাকে?

ব্যাপারটি হল যে this সর্বদা সেই এলিমেন্টটি ধারণ করে যার সাথে ইভেন্টটি বাইন্ড করা ছিল, কিন্তু target প্রপার্টি - সেই এলিমেন্টটি যেখানে আসলে ক্লিক করা হয়েছে। এই আসল এলিমেন্টটি this-এর সাথে মিলতে পারে, বা নাও মিলতে পারে।

এর একটি উদাহরণ দেখা যাক। ধরা যাক আমাদের কাছে একটি div আছে, এবং তার ভিতরে একটি প্যারাগ্রাফ:

<div id="elem">
	<p>text</p>
</div>

আমরা div-এর সাথে একটি ইভেন্ট বাইন্ড করব, কিন্তু প্যারাগ্রাফে ক্লিক করব। এটা স্পষ্ট যে প্যারাগ্রাফে ক্লিক করা একই সাথে div-এ ক্লিক করার সমান, কারণ প্যারাগ্রাফটি আমাদের div-এর ভিতরে রয়েছে।

বর্ণিত ক্ষেত্রে দেখা যাবে যে target প্রপার্টিটি সেই চূড়ান্ত ট্যাগটি ধারণ করবে, যেখানে ইভেন্টটি ঘটেছে - অর্থাৎ প্যারাগ্রাফ, এবং div নয়। এটা নিশ্চিত হওয়া যাক:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // আমাদের প্যারাগ্রাফ প্রিন্ট করবে
	console.log(this);         // আমাদের div প্রিন্ট করবে
});

ধরা যাক আপনার কাছে ul তালিকা আছে li ট্যাগ সহ:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul ট্যাগে একটি ক্লিক হ্যান্ডলার বাইন্ড করুন। এই হ্যান্ডলারে tagName প্রপার্টি ব্যবহার করে পরীক্ষা করুন যে কোন ট্যাগে ক্লিক করা হয়েছে। যদি li ট্যাগে ক্লিক করা হয় - এই ট্যাগের টেক্সটের শেষে একটি বিস্ময়বোধক চিহ্ন যোগ করুন। আর যদি ক্লিক ul ট্যাগে করা হয় - এ সম্পর্কে তথ্য কনসোলে প্রিন্ট করুন।