JavaScriptIntermediate

Events: Intermediate

preventDefault, stopPropagation, bubbling বনাম capturing, removeEventListener — ইভেন্ট ফ্লো নিয়ন্ত্রণ বাংলায়।

27টি অংশবাংলা ভাষায়

ইভেন্ট শুধু এক layer-এ খালাস হয় না — এটি বের হওয়া (capturing) ও উটে যাওয়া (bubbling) করে। এই পর্বে ইভেন্ট ফ্লো ও নিয়ন্ত্রণ-এর সূক্ষ্ম কৌশল শিখি।

Bubbling

<div id="outer">
  <div id="inner">ক্লিক করুন</div>
</div>

<script>
  const outer = document.getElementById("outer");
  const inner = document.getElementById("inner");

  outer.addEventListener("click", () => console.log("outer"));
  inner.addEventListener("click", () => console.log("inner"));

  // inner ক্লিকে order: inner → outer (bubbling)
</script>

inner-এ ক্লিক করলে handler inner-এ আগে, পরে parent-গুলোতে চলে — এটাই bubbling। তাই parent handlers-ও run করে।

Capturing

outer.addEventListener("click", () => console.log("capture outer"), true);
inner.addEventListener("click", () => console.log("capture inner"), true);

// এখন order: outer → inner (capturing), তারপর bubbling
// capture outer → capture inner → inner → outer

addEventListener-এর তৃতীয় argument true দিলে capturing phase-এ handler চলে — উপরে থেকে নিচে। default (false) bubbling-এ।

preventDefault

document.querySelector("form").addEventListener("submit", (e) => {
  e.preventDefault();       // page reload আটকায়
  const data = new FormData(e.target);
  console.log("JS-এ সাবমিট", data.get("name"));
});

// link-এর default navigation আটকানো
document.querySelector("a").addEventListener("click", (e) => {
  e.preventDefault();
  console.log("লিঙ্কে যাওয়া হয়নি");
});

preventDefault() default ব্রাউজার আচরণ (submit/reload, link navigation) আটকায় — ইভেন্ট ফ্লো থামায় না।

stopPropagation

inner.addEventListener("click", (e) => {
  e.stopPropagation();      // parent-এ আর যায় না
  console.log("শুধু inner");
});

// এখন inner ক্লিকে outer-এর handler আর run হয় না

stopPropagation() bubbling/capturing-এর বিস্তার থামায়। সতর্ক: parent-এর অন্য ক্ষমতা আড়াল হতে পারে — তাই প্রয়োজনের বাইরে এড়িয়ে চলুন।

stopImmediatePropagation

element.addEventListener("click", () => console.log("প্রথম"));
element.addEventListener("click", (e) => {
  e.stopImmediatePropagation();  // বাকি handler-গুলোও থামে
  console.log("দ্বিতীয়");
});
element.addEventListener("click", () => console.log("তৃতীয় — আর চলে না"));

// ক্লিকে: প্রথম → দ্বিতীয় (তৃতীয় চলে না)

stopPropagation parent বন্ধ, কিন্তু নিজের more handlers চলতে পারে। stopImmediatePropagation ওই element-এ পিছনের সব handler-ও থামায়।

removeEventListener

function onKeydown(e) {
  console.log("key:", e.key);
}

document.addEventListener("keydown", onKeydown);

// আর দরকার নেই — মুছে ফেলা
document.removeEventListener("keydown", onKeydown);

remove করার জন্য handler-কে named function রাখতে হবে — anonymous function এইভাবে remove করা যায় না।

একবারের listener

button.addEventListener(
  "click",
  () => console.log("একবারই"),
  { once: true },   // একবার run-এর পর auto remove
);

Load events

// HTML load — সব resource নয়
window.addEventListener("load", () => {
  console.log("সব লোড শেষ");
});

// DOM tree ready — image/font-এর জন্য অপেক্ষা না
console.log("DOM লোড হয়েছে");

load সম্পূর্ণ পেজ লোডের পর, DOMContentLoaded DOM-ই যথেষ্ট হলে চলে। script-গুলো <body>-র শেষে দিলে সাধারণত DOM-ই ইতিমধ্যে আছে।

মেথড	কাজ
`preventDefault()`	default আচরণ থামায়
`stopPropagation()`	parent bubbling থামায়
`stopImmediatePropagation()`	সব বাকি handler-ও থামায়
`removeEventListener`	handler মুছে দেয়
`{ once: true }`	একবারে auto-remove

preventDefault vs stopPropagation

দুই-টাও না গুলিয়ে: preventDefault কাজের default আচরণ, stopPropagation ইভেন্টের বিস্তার — এরা আলাদা।

Practice

একটি dropdown মেনু বানান: বাইরে ক্লিকে বন্ধ হোক — document-এ click listener + e.target চেক, parent-এ stopPropagation।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।