HTML currentTarget ইভেন্ট প্রোপার্টি

currentTarget ইভেন্ট প্রোপার্টি

currentTarget ইভেন্ট প্রোপার্টি उस এলিমেন্টটি রিটার্ন করে যেন ইভেন্ট লিসেনার অ্যাটাচ করা হয়েছিল। এটি target থেকে ভিন্ন — target হলো যেখানে ইভেন্ট আসলে ওরিজিনেট করেছে (যেমন: বাটনের ভিতরে একটি <span> ক্লিক করলে target হবে span, কিন্তু currentTarget হবে button যদি লিসেনার বাটনে থাকে)।

সিনট্যাক্স

event.currentTarget

উদাহরণ

<!DOCTYPE html>
<html>
<body>
  <h2>এলিমেন্ট পাওয়া</h2>
  <p onclick="myFunction(event)">
    এই লাইনে ক্লিক করুন যেন ইভেন্ট লিসেনার ট্রিগার করে এমন এলিমেন্টটি দেখানো হয়।
  </p>
  <script>
    function myFunction(event) {
      alert("Element = " + event.currentTarget.nodeName);
    }
  </script>
</body>
</html>

আউটপুট

লাইনে ক্লিক করলে অ্যালার্ট বক্সে এলিমেন্টের নাম見えるবে (এখানে P):

target vs currentTarget

ব্যবহারিক উদাহরণ: Event Delegation

<ul id="list">
  <li>আইটেম ১ <button>Delete</button></li>
  <li>আইটেম ২ <button>Delete</button></li>
</ul>
<script>
  document.getElementById('list').addEventListener('click', function(e) {
    // currentTarget = ul, target = button বা li
    if (e.target.tagName === 'BUTTON') {
      console.log('Delete clicked for:', e.target.closest('li').textContent);
    }
  });
</script>

দ্রষ্টব্য

• currentTarget রিড-অনলি (read-only)।
• এরো ফাংশন (arrow function) ব্যবহার করলে this বাইন্ড হয় না, তাই event.currentTarget ব্যবহার করুন।