event — bubbling, delegation আর custom event

১ · Event কী — ব্রাউজার বলছে “কিছু একটা ঘটেছে”

এখন পর্যন্ত লেখা বেশিরভাগ প্রোগ্রাম ওপর থেকে নিচে চলে, তারপর শেষ। কিন্তু একটি ওয়েব পাতা কখনো “শেষ” হয় না। পাতা খুলে থাকে, আর অপেক্ষা করে — কখন ব্যবহারকারী বোতাম চাপবেন, কখন কিছু লিখবেন, কখন স্ক্রল করবেন। কখন কী ঘটবে, প্রোগ্রাম আগে থেকে জানে না। এই ধরনের প্রোগ্রামকে বলে event-driven প্রোগ্রাম।

একটি event হলো ব্রাউজারের পাঠানো একটি বার্তা: “এই element-এ এই ঘটনা ঘটেছে”. ক্লিক, কি চাপা, মাউস সরানো, স্ক্রল, ফর্ম জমা, ছবি লোড শেষ, ট্যাব লুকানো — সবই event. আপনার কাজ হলো আগে থেকে বলে রাখা, “এই element-এ এই ধরনের event ঘটলে এই function ডেকো”. এই function-কে বলে event listener বা handler. পর্ব ৩১-এ দেখেছেন, ব্রাউজার event-কে একটি task হিসেবে queue-তে রাখে, আর call stack খালি হলে event loop আপনার listener চালায়। তাই একটি listener যতক্ষণ চলে, ততক্ষণ পাতা আর কোনো ক্লিকে সাড়া দেয় না — listener ছোট রাখুন।

একটি event-এর যাত্রা বুঝতে DOM গাছ মনে করুন (পর্ব ৩৭)। আপনি একটি <span>-এ ক্লিক করলেন, যেটি একটি <li>-এর ভেতরে, যেটি একটি <ul>-এর ভেতরে। ক্লিকটি কি শুধু span-এর? না — span-এ ক্লিক মানে li-তেও ক্লিক, ul-এও, body-তেও। তাই ব্রাউজার event-টিকে গাছের ওপর থেকে নিচে span পর্যন্ত নামায়, তারপর আবার ওপরে তোলে, আর পথে প্রতিটি element-এর listener-কে সুযোগ দেয়। এই তিন ধাপের যাত্রা — capture, target আর bubble — এই পর্বের কেন্দ্র। এর জন্যই একটি parent-এ একটি listener দিয়ে তার সব সন্তানের ক্লিক সামলানো যায়, যাকে বলে event delegation.

২ · addEventListener আর removeEventListener

Listener লাগানোর আধুনিক ও সঠিক উপায় একটিই: target.addEventListener(type, listener, options). type হলো event-এর নাম, “on” ছাড়া — "click", "keydown", "input". একই element-এ একই event-এ যত খুশি listener লাগানো যায়; সেগুলো রেজিস্টারের ক্রমে চলে। একই function একই option-এ দুবার দিলে দ্বিতীয়টি উপেক্ষিত হয় — দুবার চলে না।

Listener সরাতে removeEventListener, আর এখানে সবচেয়ে প্রচলিত ফাঁদ: সরাতে হলে হুবহু একই function reference দিতে হয়, আর capture option-ও মিলতে হয়। নিচের কোডে দ্বিতীয় লাইনটি কিছুই সরায় না:

btn.addEventListener("click", () => console.log("চাপা হলো"));
btn.removeEventListener("click", () => console.log("চাপা হলো")); // ✗ নতুন function!

const onClick = () => console.log("চাপা হলো");                      // ✓ নাম দিয়ে রাখুন
btn.addEventListener("click", onClick);
btn.removeEventListener("click", onClick);                         // সরল

দেখতে হুবহু এক হলেও দুটি arrow function দুটি আলাদা object — পর্ব ১৪-এর reference-এর নিয়ম। পর্ব ২৪-এ দেখেছেন, .bind(this)-ও প্রতিবার নতুন function বানায়, তাই একই ফাঁদ। Anonymous listener তখনই ঠিক আছে, যখন সেটি কখনো সরানোর দরকার নেই।

চারটি option

signal option-টি পর্ব ৩৬-এর AbortController-এর সাথে চমৎকার মেলে। একটি modal খুললে আপনি document-এ keydown, window-এ resize, আর বোতামে click — তিনটি listener লাগালেন। বন্ধ করার সময় তিনটি function reference আলাদা করে মনে রাখার দরকার নেই:

function openModal(modal) {
  const ctrl = new AbortController();
  const opts = { signal: ctrl.signal };
  document.addEventListener("keydown", (e) => { if (e.key === "Escape") close(); }, opts);
  window.addEventListener("resize", () => position(modal), { ...opts, passive: true });
  modal.querySelector(".close").addEventListener("click", () => close(), opts);
  function close() { modal.hidden = true; ctrl.abort(); }   // এক ডাকে তিনটিই সরল
}

পুরোনো দুই উপায় — property আর inline attribute

btn.onclick = fn — এটিও কাজ করে, কিন্তু একটি element-এ একটি event-এর জন্য মাত্র একটি জায়গা। দ্বিতীয় কোড btn.onclick = অন্যFn লিখলে প্রথমটি চুপচাপ মুছে যায়। আর HTML-এ লেখা inline handler <button onclick="addToCart(5)"> আরও সমস্যার: কোডটি একটি string, তাই global function ছাড়া কিছু ডাকা কঠিন; HTML আর আচরণ মিশে যায় (separation of concerns ভাঙে); আর নিরাপত্তার জন্য যে Content Security Policy inline script বন্ধ করে, সেটি এই attribute-গুলোও বন্ধ করে দেয় (পর্ব ৪৩)। নতুন কোডে সবসময় addEventListener.

Handler-এর ভেতরে this

পর্ব ২৪-এর নিয়ম এখানে সরাসরি খাটে। সাধারণ function handler-কে ব্রাউজার ডাকে this = যে element-এ listener বসানো (অর্থাৎ e.currentTarget) দিয়ে। Arrow handler-এর নিজের this নেই — সে চারপাশের this নেয় (lexical this). class-এর method সরাসরি দিলে (btn.addEventListener("click", this.save)) this হারায় — this হয়ে যায় বোতাম। পরামর্শ: element দরকার হলে this-এর বদলে e.currentTarget লিখুন — স্পষ্ট, আর arrow-এও কাজ করে।

৩ · Event object — ঘটনার পুরো বিবরণ

প্রতিটি listener প্রথম argument হিসেবে একটি event object পায় — সাধারণত নাম দেওয়া হয় e বা event. Event-এর ধরন অনুযায়ী এটি আলাদা class-এর: MouseEvent, PointerEvent, KeyboardEvent, InputEvent, FocusEvent — সবাই মূল Event class থেকে আসে। সবচেয়ে দরকারি property-গুলো:

target বনাম currentTarget — এই পর্বের সবচেয়ে গুরুত্বপূর্ণ পার্থক্য। ধরুন একটি বোতামের ভেতরে একটি আইকন আছে: <button><i class="icon"></i> কার্টে যোগ</button>, আর listener বোতামে। ব্যবহারকারী ঠিক আইকনের ওপর ক্লিক করলে e.target হবে <i>, কিন্তু e.currentTarget হবে <button>. যে কোড e.target.dataset.id পড়ে, সে আইকনে ক্লিক হলে undefined পায় — “মাঝে মাঝে কাজ করে না” ধরনের বাগের একটি বড় উৎস। currentTarget একটি চলমান মান: listener শেষ হলে এটি আবার null হয়ে যায়, তাই পরে ব্যবহারের জন্য রাখতে চাইলে একটি variable-এ কপি করুন।

key বনাম code: key বলে কোন অক্ষর বা কাজ তৈরি হলো — "a", "A", "Enter", "Escape", "ArrowDown". এটি কি-বোর্ড layout-এর ওপর নির্ভর করে — বাংলা layout চালু থাকলে একই বোতামে অন্য অক্ষর আসতে পারে। code বলে কোন বোতাম চাপা হলো, layout যা-ই হোক — "KeyA", "Slash". শর্টকাট বা অক্ষরের জন্য সাধারণত key; গেমের WASD-এর মতো “বোতামের অবস্থান” দরকার হলে code.

isTrusted: ব্যবহারকারী সত্যি ক্লিক করলে true; কোড থেকে btn.click() বা dispatchEvent করলে false. ব্রাউজার কিছু ক্ষমতা শুধু সত্যিকারের ব্যবহারকারী-ঘটনায় দেয় — যেমন popup খোলা, fullscreen, clipboard-এ লেখা। এই পর্বের runnable উদাহরণ event তৈরি করে কোড থেকে, তাই সেখানে isTrusted false.

৪ · তিন ধাপের যাত্রা — capture, target, bubble

আপনি একটি <span>-এ ক্লিক করলেন। ব্রাউজার প্রথমে পথ ঠিক করে: window → document → <html> → <body> → <ul> → <li> → <span>. পথটি event শুরুর আগেই স্থির হয়ে যায় — মাঝপথে DOM বদলালেও পথ বদলায় না (e.composedPath() দিয়ে এই পথ দেখা যায়)। তারপর তিন ধাপ, যাকে একসাথে বলে event propagation:

1. Capture ধাপ: window থেকে নিচে নেমে target-এর parent পর্যন্ত — শুধু capture: true listener চলে।
2. Target ধাপ: target element নিজে — তার সব listener চলে (আধুনিক ব্রাউজারে capture listener আগে)।
3. Bubble ধাপ: target-এর parent থেকে আবার ওপরে window পর্যন্ত — সাধারণ (capture ছাড়া) listener চলে।

ধাপে ধাপে দেখুন, কোন listener কখন চলে, আর প্রতিটির ভেতরে target ও currentTarget কী:

1document.addEventListener("click", A, { capture: true });2ul.addEventListener("click", B, { capture: true });3span.addEventListener("click", C);4li.addEventListener("click", D);5ul.addEventListener("click", E);6document.addEventListener("click", F);7// ব্যবহারকারী span-এ ক্লিক করলেন

এবার নিজে চালিয়ে দেখুন। কোডটি window, document, ul, li আর span — পাঁচটিতেই একটি capture আর একটি সাধারণ listener বসায়, তারপর কোড থেকে span-এ ক্লিক পাঠায়। দ্বিতীয়বার li-তে একটি stopPropagation বসিয়ে আবার ক্লিক পাঠায়। ওপরের ফ্রেমে “অর্ডার” লেখাটিতে আপনি নিজেও ক্লিক করতে পারেন — নতুন log দেখবেন।

const ul = document.querySelector("#menu");
const li = ul.querySelector("li");
const span = li.querySelector("span");
const phase = ["-", "capture", "target", "bubble"];
const nodes = { window, document, ul, li, span };

for (const [label, node] of Object.entries(nodes)) {
  for (const capture of [true, false]) {
    node.addEventListener("click", (e) => {
      console.log(`${phase[e.eventPhase]} · ${label}`);
    }, { capture });
  }
}
span.click();                                   // কোড থেকে ক্লিক

console.log("--- li-তে stopPropagation ---");
li.addEventListener("click", (e) => {
  e.stopPropagation();
  console.log("li থামাল · isTrusted:", e.isTrusted);
}, { once: true });
span.dispatchEvent(new MouseEvent("click", { bubbles: true }));

সব event bubble করে না

বেশিরভাগ ব্যবহারকারী-ঘটনা (click, keydown, input, submit, pointerdown) bubble করে। কিন্তু কিছু event শুধু target-এ থাকে: focus ও blur, mouseenter ও mouseleave, ছবি বা script-এর load ও error, আর কোনো element-এর নিজের scroll. এদের প্রায় সবার একটি bubble করা জোড়া আছে — focusin/focusout, mouseover/mouseout — delegation-এর জন্য সেগুলো ব্যবহার করুন। আর একটি কৌশল: যে event bubble করে না, সেটিও capture ধাপে পূর্বপুরুষের কাছ দিয়ে যায়। তাই form.addEventListener("blur", fn, true) ফর্মের সব input-এর blur ধরতে পারে।

৫ · যাত্রা থামানো আর ডিফল্ট কাজ থামানো

তিনটি method প্রায়ই গুলিয়ে যায়, অথচ তারা সম্পূর্ণ আলাদা জিনিস থামায়:

preventDefault-এর প্রচলিত ব্যবহার: JavaScript দিয়ে ফর্ম জমা দেওয়া (পর্ব ৩৯-এ বিস্তারিত), নিজের ডান-ক্লিক মেনু (contextmenu event), লিংক চাপলে পুরো পাতা না বদলে JavaScript দিয়ে content বদলানো। Listener ডাকলে e.defaultPrevented true হয়ে যায় — পরের listener এটি দেখে বুঝতে পারে। একটি সীমা মনে রাখুন: passive: true listener-এ preventDefault উপেক্ষিত হয় (Edge/Chrome console-এ একটি সতর্কবার্তা দেখায়), কারণ passive মানেই প্রতিশ্রুতি “আমি থামাব না”. আর event-টি cancelable না হলে (যেমন scroll) preventDefault-এর কোনো প্রভাবই নেই — স্ক্রল ঘটে যাওয়ার পরে scroll event আসে।

এবার যাত্রা থামানো। একটি পণ্যের card আছে, card-এ ক্লিক করলে পণ্যের বিস্তারিত পাতা খোলে; card-এর ভেতরে একটি “কার্টে যোগ” বোতাম। বোতাম চাপলে পাতা খোলা উচিত নয়। প্রথম যে সমাধান মাথায় আসে, বোতামে stopPropagation. দেখুন এতে কী ভাঙে:

1btn.addEventListener("click", A);      // কার্টে যোগ2btn.addEventListener("click", B);      // বোতাম অ্যানিমেশন3card.addEventListener("click", C);     // বিস্তারিত পাতা খোলা4document.addEventListener("click", G); // analytics, খোলা মেনু বন্ধ

৬ · Event delegation — এক listener, অনেক element

একটি অনলাইন দোকানের পাতায় ৫০০টি পণ্য, প্রতিটিতে একটি “কার্টে যোগ” বোতাম। সহজ চিন্তা: loop চালিয়ে ৫০০টি বোতামে ৫০০টি listener. এতে তিনটি সমস্যা। (১) ৫০০টি function object আর রেজিস্ট্রেশন — memory আর শুরুর সময় খরচ। (২) পরে “আরও দেখুন” চাপলে নতুন ২০টি পণ্য এলে তাদের কোনো listener নেই — আবার লাগাতে মনে রাখতে হবে। (৩) পণ্য মুছলে তার listener-এর কথাও ভাবতে হবে।

Bubbling এর সুন্দর সমাধান দেয়: সব বোতামের সাধারণ পূর্বপুরুষে — পণ্যের grid-এ — একটিমাত্র listener. যেকোনো বোতামে ক্লিক bubble করে grid-এ পৌঁছায়। listener-এর ভেতরে e.target বলে দেয় ক্লিকটি ঠিক কোথায়, আর closest সেখান থেকে ওপরে উঠে প্রথম মেলানো পূর্বপুরুষ খুঁজে দেয়। পণ্যের পরিচয় রাখা হয় একটি data attribute-এ (data-id="tea"). ধাপে ধাপে:

1list.addEventListener("click", (e) => {2  const item = e.target.closest("[data-id]");3  if (!item || !list.contains(item)) return;4  console.log("বাছাই:", item.dataset.id);5});6list.insertAdjacentHTML("beforeend",7  '<li data-id="p4"><b>মিষ্টি দই</b> ৳১২০</li>');8// ব্যবহারকারী নতুন li-এর <b>-তে ক্লিক করলেন

Delegation কোথায় সবচেয়ে কাজের: বড় বা বদলাতে থাকা list (todo, চ্যাট বার্তা, কার্টের item, টেবিলের সারি), আর যেখানে item JavaScript দিয়ে বারবার তৈরি-মোছা হয়। একটি listener-এ একাধিক কাজও সামলানো যায় — বোতামে data-action="add", data-action="remove" দিয়ে, আর listener-এ switch (btn.dataset.action). জনপ্রিয় framework-গুলোর ভেতরেও এই ভাবনা আছে — যেমন React নিজের event ব্যবস্থায় পাতার root-এ listener বসিয়ে delegation করে (পর্ব ৫৪)।

৭ · নিজের event — CustomEvent আর EventTarget

এখন পর্যন্ত event পাঠিয়েছে ব্রাউজার। কিন্তু আপনিও পাঠাতে পারেন — এবং বড় অ্যাপে এটি খুব শক্তিশালী নকশা। ধরুন পাতায় তিনটি আলাদা অংশ: পণ্যের grid, হেডারের কার্ট-ব্যাজ (লাল বৃত্তে সংখ্যা), আর পাশের “মোট দাম” প্যানেল। grid কি ব্যাজ আর প্যানেলের function সরাসরি ডাকবে? তাহলে grid-কে সবার নাম জানতে হবে, আর নতুন কোনো অংশ যোগ করলে grid-এর কোড বদলাতে হবে। ভালো নকশা: grid শুধু ঘোষণা করে “কার্ট বদলেছে”, আর যার দরকার সে শোনে। এটিই observer pattern.

DOM-এ নিজের event বানাতে CustomEvent, আর পাঠাতে dispatchEvent:

// পাঠানো দিক — কে শুনছে তা জানে না
grid.dispatchEvent(new CustomEvent("cart:updated", {
  detail: { id: "tea", count: 3 },   // যা খুশি ডেটা
  bubbles: true,                     // ডিফল্টে false — document পর্যন্ত যেতে true দিন
}));

// শোনা দিক — কে পাঠাল তা জানে না
document.addEventListener("cart:updated", (e) => {
  badge.textContent = e.detail.count;
});

তিনটি খুঁটিনাটি। (১) নাম ছোট হাতের আর একটি উপসর্গসহ রাখুন (cart:updated, chat:message) — ব্রাউজারের ভবিষ্যৎ কোনো built-in event-এর সাথে নামের সংঘাত এড়াতে। (২) bubbles আর cancelable নিজে তৈরি event-এ ডিফল্টে false. (৩) dispatchEvent synchronous: সব listener সাথে সাথে, একই call stack-এ চলে, তারপর dispatchEvent ফেরত আসে — ব্রাউজারের ক্লিকের মতো queue-তে অপেক্ষা করে না। Event-টি cancelable: true হলে আর কোনো listener preventDefault ডাকলে dispatchEvent false ফেরত দেয় — পাঠানো দিক এভাবে জিজ্ঞেস করতে পারে “কেউ আপত্তি করেছে?”.

DOM ছাড়াই event — নিজের class-এ EventTarget

addEventListener আর dispatchEvent আসলে DOM element-এর নিজের নয়; এগুলো আসে EventTarget নামের একটি class থেকে, যা থেকে Element, document, window, এমনকি WebSocket আর AbortSignal-ও তৈরি। আধুনিক ব্রাউজারে আর Node.js-এ (Node 15 থেকে global) আপনি নিজের class-ও EventTarget থেকে বানাতে পারেন — DOM-এর কোনো element ছাড়াই। পর্ব ৩২-এর Node EventEmitter-এর মতো, কিন্তু ব্রাউজার আর Node দুই জায়গায় একই API.

নিচের উদাহরণে দুটি ভাবনা একসাথে: একটি Cart class (EventTarget থেকে, private field-সহ, পর্ব ২৬) প্রতিটি বদলে change event পাঠায়, আর ব্যাজ সেটি শুনে নিজেকে বদলায়। পণ্যের grid-এ একটিমাত্র delegated listener. কোড একটি নতুন পণ্য যোগ করে, তারপর কোড থেকে তিনটি ক্লিক পাঠায়। ফ্রেমের বোতামগুলোতে আপনি নিজেও ক্লিক করে ব্যাজ বাড়তে দেখতে পারেন।

class Cart extends EventTarget {
  #items = new Map();
  add(id) {
    this.#items.set(id, (this.#items.get(id) ?? 0) + 1);
    const count = [...this.#items.values()].reduce((a, b) => a + b, 0);
    this.dispatchEvent(new CustomEvent("change", { detail: { id, count } }));
  }
}
const cart = new Cart();
const grid = document.querySelector("#grid");

cart.addEventListener("change", (e) => {           // ব্যাজ শুধু শোনে
  document.querySelector("#badge").textContent = e.detail.count;
  console.log(`কার্টে ${e.detail.id} · মোট ${e.detail.count}`);
});
grid.addEventListener("click", (e) => {            // এক listener, সব বোতাম
  const card = e.target.closest("button")?.closest("[data-id]");
  if (!card) return;                               // বোতামের বাইরে ক্লিক
  console.log(`target=${e.target.tagName}, currentTarget=#${e.currentTarget.id}`);
  cart.add(card.dataset.id);
});
grid.insertAdjacentHTML("beforeend", '<div data-id="gamchha"><b>গামছা</b><br><button type="button"><i>+</i> কার্টে যোগ</button></div>');
grid.querySelector('[data-id="tea"] button').click();
grid.querySelector('[data-id="gamchha"] i').click();   // নতুন পণ্য, ভেতরের <i>
grid.querySelector('[data-id="tea"] b').click();       // বোতাম নয় → কিছুই না

৮ · প্রচলিত event-এর মানচিত্র আর বাস্তব নকশা

পাতার জীবনচক্র

• DOMContentLoaded — HTML পুরো পড়া আর DOM গাছ তৈরি শেষ (আর defer script চলে গেছে); ছবি তখনো আসছে থাকতে পারে। DOM নিয়ে কাজ শুরুর জন্য এটিই যথেষ্ট। <script defer> বা module script ব্যবহার করলে সাধারণত এর অপেক্ষাও লাগে না।
• load (window-এ) — ছবি, stylesheet, iframe সব আসা শেষ। অনেক পরে আসে; শুধু ছবির মাপের মতো জিনিস দরকার হলে। একটি <img>-এর নিজেরও load আর error event আছে।
• visibilitychange — ব্যবহারকারী অন্য ট্যাবে গেলেন বা অ্যাপ লুকালেন (document.visibilityState === "hidden"). ভিডিও থামানো, polling কমানো, অসমাপ্ত লেখা সেভ করার সঠিক জায়গা — মোবাইলে অনেক সময় এরপর পাতা আর কোনো event ছাড়াই বন্ধ হয়ে যায়। পুরোনো unload event নির্ভরযোগ্য নয় আর ধীরে ধীরে বাদ দেওয়া হচ্ছে।
• beforeunload — পাতা ছাড়ার আগে “আপনি কি নিশ্চিত?” জিজ্ঞাসা। আধুনিক ব্রাউজার নিজের সাধারণ বার্তা দেখায়, আপনার লেখা বার্তা নয়। সাবধানে: শুধু অসংরক্ষিত পরিবর্তন থাকলে listener লাগান, সেভ হলেই সরান — সবসময় লাগিয়ে রাখলে ব্যবহারকারী বিরক্ত হন, আর কিছু ব্রাউজারে পাতাটি দ্রুত “পেছনে যাওয়া” cache-এ রাখা যায় না।

বাস্তব নকশা: modal বন্ধ করা আর “/” শর্টকাট

একটি modal (পপআপ বাক্স) দুইভাবে বন্ধ হওয়া উচিত: Escape চাপলে, আর বাক্সের বাইরের কালো অংশে (backdrop) ক্লিক করলে — কিন্তু বাক্সের ভেতরে ক্লিক করলে নয়। ভেতরের ক্লিকও bubble করে backdrop-এ পৌঁছায়, তাই পার্থক্য করতে হয় target দিয়ে। আর অনেক সাইটে “/” চাপলে সার্চ বক্সে cursor চলে যায় — কিন্তু ব্যবহারকারী কোনো ঘরে লিখতে থাকলে নয়:

// backdrop-এ ক্লিক: target যদি backdrop নিজেই হয় (ভেতরের বাক্স নয়)
backdrop.addEventListener("click", (e) => {
  if (e.target === e.currentTarget) closeModal();
});

document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && !backdrop.hidden) closeModal();

  const typing = e.target.closest("input, textarea, select, [contenteditable]");
  if (e.key === "/" && !typing && !e.ctrlKey && !e.metaKey && !e.altKey) {
    e.preventDefault();                         // "/" অক্ষরটি বক্সে যেন না বসে
    document.querySelector("#search").focus();
  }
});

ব্রাউজারের নিজের <dialog> element (showModal()) Escape-এ বন্ধ হওয়া, focus আটকে রাখা আর backdrop নিজেই দেয় — নিজে modal বানানোর আগে সেটি ভাবুন।

Keyboard আর accessibility — <button> বিনামূল্যে যা দেয়

একটি <button>-এ click listener লাগালে সেটি শুধু মাউসে নয়, Tab দিয়ে focus করে Enter বা Space চাপলেও চলে — ব্রাউজার নিজেই কি-চাপাকে click বানিয়ে দেয়। screen reader-ও এটিকে “বোতাম” বলে ঘোষণা করে। কিন্তু <div class="btn">-এ click listener দিলে এর কিছুই হয় না: Tab-এ focus আসে না, Enter-এ কিছু হয় না, screen reader জানে না এটি বোতাম। ঠিক করতে tabindex="0", role="button" আর keydown-এ Enter/Space সামলানো — সবই হাতে। সহজ নিয়ম: ক্লিক করার জিনিস হলে <button>, অন্য পাতায় যাওয়ার জিনিস হলে <a href>. এটি accessibility-এর সবচেয়ে সস্তা জয়।

Touch, gesture আর ভুলে যাওয়া listener

মোবাইলের জন্য আলাদা touchstart/touchmove event আছে (একাধিক আঙুলের তথ্যসহ), কিন্তু বেশিরভাগ কাজে pointer event যথেষ্ট — ড্র্যাগ করতে pointerdown-এ setPointerCapture, আর ব্রাউজারের নিজের স্ক্রল/zoom আটকাতে CSS-এর touch-action. Pinch বা swipe-এর মতো gesture নিজে চিনতে হয় একাধিক pointer-এর অবস্থান মেপে; এটি জটিল, তাই সাধারণত লাইব্রেরি নেওয়া হয়।

শেষ সাবধানতা memory leak. একটি element DOM থেকে মুছে গেলে আর কোথাও তার reference না থাকলে তার listener-সহ সেটি garbage collection-এ চলে যায়। বিপদ হয় দীর্ঘজীবী target-এ: একটি single-page অ্যাপের component খোলার সময় window বা document-এ listener লাগাল, বন্ধের সময় সরাল না। listener-এর closure component-এর পুরো ডেটা ধরে রাখে, আর প্রতিবার খোলা-বন্ধে আরেকটি জমে — পাতা ধীরে ধীরে ভারী হয়, আর একই কাজ বারবার চলে। সমাধান: যে লাগায়, সে-ই সরায় — signal option এর সবচেয়ে সহজ উপায়। DevTools দিয়ে এমন leak খোঁজা পর্ব ৫৩-এ।

৯ · AI-এর যুগে — AI-এর লেখা event-কোড যাচাই করা

Event-এর কোড প্রায় সবসময় “কাজ করে” — অন্তত ডেমোতে, মাউসে, প্রথমবার। সমস্যা ধরা পড়ে পরে: নতুন item-এ ক্লিক কাজ করে না, কি-বোর্ডে চলে না, পাতা ধীরে ধীরে ভারী হয়, analytics অদ্ভুতভাবে কম ক্লিক দেখায়। AI টুল এই ভুলগুলো নিয়মিত করে, কারণ তার শেখার নমুনায় পুরোনো jQuery আর inline onclick-এর কোড প্রচুর।

AI-এর লেখা event-কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• loop-এ প্রতিটি item-এ listener নেই; বদলাতে থাকা list-এ delegation আছে
• কোনো inline onclick/onchange attribute নেই
• প্রতিটি removeEventListener হুবহু একই function reference পায় (অথবা signal ব্যবহার হয়েছে)
• stopPropagation থাকলে তার স্পষ্ট কারণ আছে, আর target যাচাই দিয়ে কাজ চলত না
• ক্লিক করার জিনিসগুলো <button> বা <a href>; Tab দিয়ে পৌঁছে Enter/Space চেপে নিজে পরীক্ষা করেছি
• e.target-এর জায়গায় দরকার হলে closest বা e.currentTarget — বোতামের ভেতরের আইকনে ক্লিক করে পরীক্ষা করেছি
• window/document-এ লাগানো listener component বন্ধ হলে সরে যায়
• scroll, wheel, touchmove listener passive, আর ভারী কাজ throttle করা