এই অধ্যায়ে, জাভাস্ক্রিপ্ট পর্দার আড়ালে কীভাবে ইভেন্ট হ্যান্ডেল করে তা নিয়ে আমরা আরও গভীরে যাব, যার মধ্যে আছে:
event.target বনাম event.currentTargetস্কেলেবল, ডাইনামিক UI তৈরির জন্য এই ধারণাগুলো বোঝা অপরিহার্য — বিশেষ করে লিস্ট, টেবিল, ফর্ম এবং SPA-তে।
ডিফল্টভাবে, ইভেন্ট DOM ট্রিতে উপরে বাবল করে — টার্গেট এলিমেন্ট থেকে শুরু করে এর পূর্বপুরুষদের দিকে যায়।
<div id="parent">
<button id="child">Click Me</button>
</div>document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked");
});
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked");
});বাটনে ক্লিক করলে আউটপুট:
Child clicked
Parent clicked👉 এমনটা হয় কারণ ইভেন্টটি চাইল্ড থেকে প্যারেন্টের দিকে "বাবল" করে। ইভেন্ট বাবলিং সম্পর্কে আরও জানুন।
ইভেন্টকে উপরে বাবল করা থেকে আটকাতে event.stopPropagation() ব্যবহার করুন।
document.getElementById("child").addEventListener("click", function (event) {
event.stopPropagation();
console.log("Only child clicked");
});এখন, বাটনে ক্লিক করলে প্যারেন্টের লিসেনার ট্রিগার হবে না।
ক্যাপচারিং হলো বাবলিং-এর বিপরীত: টার্গেটে পৌঁছানোর আগে ইভেন্টটি DOM-এ উপর থেকে নিচে যায়।
addEventListener()-এর ৩য় প্যারামিটার দিয়ে ক্যাপচারিং সক্ষম করুন:
element.addEventListener("click", handler, true);document.getElementById("parent").addEventListener("click", () => {
console.log("Parent Capturing");
}, true);
document.getElementById("child").addEventListener("click", () => {
console.log("Child Bubble");
});ক্যাপচারিং প্রথমে চলে (সক্ষম থাকলে), তারপর বাবলিং।
event.target: যে প্রকৃত এলিমেন্ট ইভেন্টটি ট্রিগার করেছেevent.currentTarget: যে এলিমেন্টে হ্যান্ডলার সংযুক্ত করা হয়েছেdocument.getElementById("parent").addEventListener("click", function (e) {
console.log("Target:", e.target); // কী ক্লিক করা হয়েছিল
console.log("Current Target:", e.currentTarget); // #parent
});একাধিক চাইল্ড এলিমেন্টে আলাদা ইভেন্ট লিসেনার যোগ করার বদলে, তাদের প্যারেন্টে একটি লিসেনার যোগ করুন এবং event.target ব্যবহার করে কোন চাইল্ড এটি ট্রিগার করেছে তা যাচাই করুন।
টু-ডু লিস্ট বা কমেন্ট সেকশনের মতো ডাইনামিক কনটেন্টের জন্য দারুণ কার্যকর।
<ul id="myList">
<li>Item 1</li>
<li>Item 2</li>
</ul>document.getElementById("myList").addEventListener("click", function (e) {
if (e.target.tagName === "LI") {
alert("You clicked " + e.target.textContent);
}
});পরে নতুন <li> আইটেম যোগ হলেও এটি কাজ করে — আবার বাইন্ড করার দরকার নেই!
button.addEventListener("click", function () {
alert("You’ll see me only once!");
}, { once: true });<ul id="tasks">
<li>Task 1 <button>Delete</button></li>
<li>Task 2 <button>Delete</button></li>
</ul>document.getElementById("tasks").addEventListener("click", function (e) {
if (e.target.tagName === "BUTTON") {
e.target.parentElement.remove(); // <li> সরিয়ে দেয়
}
});প্রতিটি বাটনে আলাদাভাবে লিসেনার বসানোর চেয়ে এটি অনেক পরিষ্কার এবং কার্যকরী।
stopPropagation দিয়ে বাবলিং প্রতিরোধ করুন।{ once: true } ব্যবহার করে একটি "একবার চালানো" বাটন তৈরি করুন।target এবং currentTarget লগ করুন এবং পার্থক্য লক্ষ্য করুন।