diff --git a/2-ui/2-events/02-bubbling-and-capturing/article.md b/2-ui/2-events/02-bubbling-and-capturing/article.md
index e203a4eb4..f4e8aa497 100644
--- a/2-ui/2-events/02-bubbling-and-capturing/article.md
+++ b/2-ui/2-events/02-bubbling-and-capturing/article.md
@@ -1,8 +1,8 @@
-# Bubbling and capturing
+# Bubbling এবং capturing
 
-Let's start with an example.
+একটি উদাহরণ দিয়ে শুরু করা যাক।
 
-This handler is assigned to `<div>`, but also runs if you click any nested tag like `<em>` or `<code>`:
+`<div>` এর মধ্যে একটি হ্যান্ডেলার অ্যাসাইন করলাম, কিন্তু যদি `<em>` বা `<code>` এ ক্লিক করা হয় তাহলেও এটি রান করবে:
 
 ```html autorun height=60
 <div onclick="alert('The handler!')">
@@ -10,15 +10,15 @@ This handler is assigned to `<div>`, but also runs if you click any nested tag l
 </div>
 ```
 
-Isn't it a bit strange? Why does the handler on `<div>` run if the actual click was on `<em>`?
+এটি কিছুটা অদ্ভুত না? কেন `<em>` ক্লিকে `<div>` এর হ্যান্ডেলারটি রান হয়?
 
 ## Bubbling
 
-The bubbling principle is simple.
+এর প্রধান কারণ *bubbling*।
 
-**When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors.**
+**যখন কোন এলিমেন্টে ইভেন্ট সংগঠিত হয়, প্রথমে এলিমেন্টটির হ্যান্ডেলার রান হবে, তারপর তার প্যারেন্টটি রান হবে, এভাবে তার উপরের এলিমেন্টটি রান হবে**
 
-Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of them:
+দেখা যাক আমাদের ৩ টি নেস্টেড এলিমেন্ট `FORM > DIV > P` আছে এবং তাদের প্রতিটিতে একটি হ্যান্ডেলার আছে:
 
 ```html run autorun
 <style>
@@ -35,57 +35,57 @@ Let's say we have 3 nested elements `FORM > DIV > P` with a handler on each of t
 </form>
 ```
 
-A click on the inner `<p>` first runs `onclick`:
-1. On that `<p>`.
-2. Then on the outer `<div>`.
-3. Then on the outer `<form>`.
-4. And so on upwards till the `document` object.
+`<p>` এলিমেন্টে ক্লিক হলে প্রথমে তার `onclick` রান হবে:
+1. প্রথমে `<p>` দেখাবে।
+2. তারপর এর উপরের `<div>`।
+3. তারপর এর উপরের `<form>`।
+4. এভাবে `document` অবজেক্ট পর্যন্ত।
 
 ![](event-order-bubbling.svg)
 
-So if we click on `<p>`, then we'll see 3 alerts: `p` -> `div` -> `form`.
+সুতরাং আমরা যদি `<p>` তে ক্লিক করি, তাহলে আমরা ৩টি অ্যালার্ট দেখব: `p` -> `div` -> `form`।
 
-The process is called "bubbling", because events "bubble" from the inner element up through parents like a bubble in the water.
+এই প্রক্রিয়ায়টিকে বলে "bubbling", কেননা ইভেন্ট সমূহ "bubble" আকারে উপরের দিকে উঠে অনেকটা পানির বুদবুদের মত।
 
-```warn header="*Almost* all events bubble."
-The key word in this phrase is "almost".
+```warn header="*প্রায়* সকল ইভেন্ট bubble"
+এখানে আমরা "প্রায়" ব্যবহার করছি।
 
-For instance, a `focus` event does not bubble. There are other examples too, we'll meet them. But still it's an exception, rather than a rule, most events do bubble.
+যেমন, `focus` ইভেন্ট bubble হয় না। এছাড়াও আরো কিছু উদাহরণ আছে, পরবর্তী আমরা তাদের দেখব। কিন্তু এরা ব্যতীক্রম, বেশিরভাগ ইভেন্ট bubble হয়।
 ```
 
 ## event.target
 
-A handler on a parent element can always get the details about where it actually happened.
+প্যারেন্ট এলিমেন্টের হ্যান্ডেলার থেকে আমরা সর্বদা কোথা হতে ইভেন্টটি সংগঠিত হচ্ছে তার বিস্তারিত জানতে পারি।
 
-**The most deeply nested element that caused the event is called a *target* element, accessible as `event.target`.**
+**যে এলিমেন্ট হতে আমাদের ইভেন্ট সংগঠিত হয় তাকে বলা হয় *target element* এটি `event.target` দ্বারা এক্সেস করা যায়**
 
-Note the differences from `this` (=`event.currentTarget`):
+পার্থক্যটি নোট করুন  `this` (=`event.currentTarget`):
 
-- `event.target` -- is the "target" element that initiated the event, it doesn't change through the bubbling process.
-- `this` -- is the "current" element, the one that has a currently running handler on it.
+- `event.target` -- হল "target" এলিমেন্ট যেখানে ইভেন্টটি সংগঠিত হয়, bubbling এর মাধ্যমে এটি পরিবর্তিত হয় না।
+- `this` -- এটি দ্বারা "বর্তমান" এলিমেন্টটি বুঝায়, যেখান হতে হ্যান্ডেলারটি রান হচ্ছে।
 
-For instance, if we have a single handler `form.onclick`, then it can "catch" all clicks inside the form. No matter where the click happened, it bubbles up to `<form>` and runs the handler.
+যেমন, যদি আমাদের একটি হ্যান্ডেলার `form.onclick` এ থাকে, তাহলে এটি তার সকল চাইল্ড এলিমেন্ট এ ক্লিকের জন্য কাজ করবে। কোথায় ক্লিক হচ্ছে এটি ব্যাপার না, ইভেন্টটি *bubble* আকারে `<form>` এ এসে হ্যান্ডেলারটি রান করবে।
 
-In `form.onclick` handler:
+`form.onclick` হ্যান্ডেলারে:
 
-- `this` (=`event.currentTarget`) is the `<form>` element, because the handler runs on it.
-- `event.target` is the actual element inside the form that was clicked.
+- `this` (=`event.currentTarget`) এটি হল `<form>` এলিমেন্টটি, হ্যান্ডেলারটি এখানে রান হচ্ছে।
+- `event.target` form এর যে এলিমেন্টটি ক্লিকড হচ্ছে।
 
-Check it out:
+লাইভ উদাহরণ দেখুন:
 
 [codetabs height=220 src="bubble-target"]
 
-It's possible that `event.target` could equal `this` -- it happens when the click is made directly on the `<form>` element.
+যখন `<form>` এলিমেন্টে ক্লিকড হবে `event.target` এবং `this`উভয়ই সমান হবে।
 
-## Stopping bubbling
+## bubbling কে থামানো
 
-A bubbling event goes from the target element straight up. Normally it goes upwards till `<html>`, and then to `document` object, and some events even reach `window`, calling all handlers on the path.
+ইভেন্ট *bubbling* টার্গেট এলিমেন্ট পর্যন্ত যায়। সাধারণত এটি `<html>` এ এবং তারপর শেষ পর্যন্ত `document` অবজেক্ট পর্যন্ত যায়, এবং কিছু ইভেন্ট `window` পর্যন্ত যায়।
 
-But any handler may decide that the event has been fully processed and stop the bubbling.
+তবে আমরা চাইলে হ্যান্ডেলারের মাধ্যমে bubbling থামাতে পারি।
 
-The method for it is `event.stopPropagation()`.
+এজন্য একটি মেথড আছে `event.stopPropagation()`।
 
-For instance, here `body.onclick` doesn't work if you click on `<button>`:
+যেমন, এখানে `body.onclick` কাজ করবে না যদি `<button>` এ ক্লিক করা হয়:
 
 ```html run autorun height=60
 <body onclick="alert(`the bubbling doesn't reach here`)">
@@ -94,65 +94,65 @@ For instance, here `body.onclick` doesn't work if you click on `<button>`:
 ```
 
 ```smart header="event.stopImmediatePropagation()"
-If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
+যদি কোন এলিমেন্টে একটি ইভেন্টের জন্য একাধিক হ্যান্ডেলার থাকে, তাহলে যদি একটির মাধ্যমে bubbling থামানো হয়, অন্যান্য গুলো এক্সিকিউট হবে।
 
-In other words, `event.stopPropagation()` stops the move upwards, but on the current element all other handlers will run.
+অন্যভাবে বলতে পারি, `event.stopPropagation()` প্যারেন্ট এলিমেন্টের হ্যান্ডেলার এক্সিকিউশন থামায়, কিন্তু ঐ এলিমেন্টের বাকী সব হ্যান্ডেলার রান হবে।
 
-To stop the bubbling and prevent handlers on the current element from running, there's a method `event.stopImmediatePropagation()`. After it no other handlers execute.
+যদি আমরা কোন একটি হ্যান্ডেলার রান হওয়ার পর অন্য সকল হ্যান্ডেলারের এক্সিকিউশন থামাতে চায় এজন্য আমাদের আরেকটি মেথড আছে `event.stopImmediatePropagation()`।
 ```
 
-```warn header="Don't stop bubbling without a need!"
-Bubbling is convenient. Don't stop it without a real need: obvious and architecturally well thought out.
+```warn header="প্রয়োজন ছাড়া Bubbling থামাবেন না!"
+Bubbling একটি সুবিধাজনক উপায়। কোন ধরণের সুস্পষ্ট কারণ ছাড়াই এটি থামাবেন না।
 
-Sometimes `event.stopPropagation()` creates hidden pitfalls that later may become problems.
+অনেক সময় `event.stopPropagation()` কিছু অদৃশ্য অদ্ভুত আচরণ করে যা আমাদের জন্য বিপদজনক হতে পারে।
 
-For instance:
+যেমন:
 
-1. We create a nested menu. Each submenu handles clicks on its elements and calls `stopPropagation` so that the outer menu won't trigger.
-2. Later we decide to catch clicks on the whole window, to track users' behavior (where people click). Some analytic systems do that. Usually the code uses `document.addEventListener('click'…)` to catch all clicks.
-3. Our analytic won't work over the area where clicks are stopped by `stopPropagation`. Sadly, we've got a "dead zone".
+1. আমরা একটি নেস্টেড মেনু তৈরি করব। প্রতিটি সাবমেনুর একটি ক্লিক হ্যান্ডেল করে এবং তারপর এটি  `stopPropagation` কল করে যার ফলে প্যারেন্ট মেনু কল হবে না।
+2. পরবর্তীতে আমরা সিদ্ধান্ত নিলাম আমরা সম্পূর্ন window এর জন্য ক্লিক ইভেন্ট অ্যাসাইন করব, ইউজারের বিহেভিয়ারের জন্য (কোন এলিমেন্টে ক্লিক হচ্ছে তা জানতে চায়)। এধরণের কিছু অ্যানালিটিক্স সিস্টেম আছে। এজন্য আমরা এভাবে কোড লিখি `document.addEventListener('click'…)` সকল ক্লিক ক্যাচ করার জন্য।
+3. আমাদের অ্যানালিটিক্স এক্ষেত্রে কাজ করবে না কেননা মেনু তে আমরা `stopPropagation` দ্বারা *bubbling* কে থামিয়ে দেয়। এক্ষেত্রে মেনুটি "dead zone" এ পরিণত হবে।
 
-There's usually no real need to prevent the bubbling. A task that seemingly requires that may be solved by other means. One of them is to use custom events, we'll cover them later. Also we can write our data into the `event` object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below.
+আসলে আমাদের *bubbling* এর জন্য ইভেন্ট prevent করা লাগবে না। এ ধরণের সমস্যা গুলো আমরা অন্যভাবে সমাধান করতে পারি, যার একটি উপায় হল কাস্টম ইভেন্ট, পরবর্তী অধ্যায়ে এ ব্যাপারে জানব।
 ```
 
 
 ## Capturing
 
-There's another phase of event processing called "capturing". It is rarely used in real code, but sometimes can be useful.
+ইভেন্ট প্রসেসিংয়ের আরেকটি ধাপ হল "capturing"। এটি বাস্তবিক ক্ষেত্রে আমরা খুব কমই ব্যবহার করি, কিন্তু অনেক সময় এটি ব্যবহার সুবিধাজনক।
 
-The standard [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) describes 3 phases of event propagation:
+স্ট্যান্ডার্ড [DOM Events](http://www.w3.org/TR/DOM-Level-3-Events/) ইভেন্ট চলাকালীন ৩টি ধাপ সম্পন্ন করে:
 
-1. Capturing phase -- the event goes down to the element.
-2. Target phase -- the event reached the target element.
-3. Bubbling phase -- the event bubbles up from the element.
+1. Capturing phase -- ইভেন্ট DOM রুট হতে নিচের দিকে এলিমেন্ট পর্যন্ত পৌঁছায়।
+2. Target phase -- ইভেন্ট টার্গেট এলিমেন্ট পর্যন্ত পৌঁছায়।
+3. Bubbling phase -- ইভেন্ট টার্গেট *bubble* আকারে উপরের দিকে যায়।
 
-Here's the picture of a click on `<td>` inside a table, taken from the specification:
+এখানে *table* এর `<td>` তে ক্লিকে ৩টি ধাপ কিভাবে সম্পন্ন হচ্ছে দেখানো হল:
 
 ![](eventflow.svg)
 
-That is: for a click on `<td>` the event first goes through the ancestors chain down to the element (capturing phase), then it reaches the target and triggers there (target phase), and then it goes up (bubbling phase), calling handlers on its way.
+`<td>` তে ক্লিকে (capturing phase) এ DOM এর রুট নোড হতে নিচের দিকে হ্যান্ডেলার এলিমেন্ট পর্যন্ত যায়, তারপর এটি টার্গেট এলিমেন্টে পৌঁছায় এবং (target phase) ট্রিগার হয়, এবং তারপর এটি (bubbling phase) সম্পন্ন করে, এবং হ্যান্ডেলার কল হয়।
 
-**Before we only talked about bubbling, because the capturing phase is rarely used. Normally it is invisible to us.**
+**capturing phase আমরা খুব কমই ব্যবহার করি, তাই উপরে আমরা শুধু bubbling নিয়ে আলোচনা করেছি।**
 
-Handlers added using `on<event>`-property or using HTML attributes or using two-argument `addEventListener(event, handler)` don't know anything about capturing, they only run on the 2nd and 3rd phases.
+আমরা `on<event>` এর জন্য অ্যাট্রিবিউট বা প্রপার্টি অথবা `addEventListener(event, handler)` এর মাধ্যমে হ্যান্ডেলার অ্যাসাইন করি যেখানে *Capturing phase* টি রান হয় না, এটি শুধুমাত্র ২য় এবং ৩য় ধাপটি রান করে।
 
-To catch an event on the capturing phase, we need to set the handler `capture` option to `true`:
+ক্যাপচারিং ধাপটির আমাদের আরো একটি অতিরিক্ত প্যারামিটার `capture` এর ভ্যালু `true` পাঠাতে হয়:
 
 ```js
 elem.addEventListener(..., {capture: true})
-// or, just "true" is an alias to {capture: true}
+// অথবা শুধুমাত্র true
 elem.addEventListener(..., true)
 ```
 
-There are two possible values of the `capture` option:
+`capture` option এর দুটি মান হতে পারে:
 
-- If it's `false` (default), then the handler is set on the bubbling phase.
-- If it's `true`, then the handler is set on the capturing phase.
+- এটি ডিফল্ট `false`, তখন এটি *bubbling phase* এ কাজ করে।
+- যদি `true` হয়, তখন এটি *capturing phase* এ কাজ করে।
 
 
-Note that while formally there are 3 phases, the 2nd phase ("target phase": the event reached the element) is not handled separately: handlers on both capturing and bubbling phases trigger at that phase.
+আমাদের ৩টি ধাপ আছে, ১ম বা ৩য় উভয় ধাপের জন্য দ্বিতীয় ধাপটি ("target phase": ইভেন্ট হ্যান্ডেলার এলিমেন্ট পর্যন্ত পৌঁছায়)।
 
-Let's see both capturing and bubbling in action:
+এখানে একটি উদাহরণ দেখানো হল:
 
 ```html run autorun height=140 edit
 <style>
@@ -176,50 +176,50 @@ Let's see both capturing and bubbling in action:
 </script>
 ```
 
-The code sets click handlers on *every* element in the document to see which ones are working.
+এখানে আমরা *প্রতিটি* এলিমেন্টের জন্য হ্যান্ডেলার সেট করেছি।
 
-If you click on `<p>`, then the sequence is:
+যদি আপনি `<p>` তে ক্লিক করেন তাহলে, এটি এমন দেখাবে:
 
-1. `HTML` -> `BODY` -> `FORM` -> `DIV` (capturing phase, the first listener):
-2. `P` (target phase, triggers two times, as we've set two listeners: capturing and bubbling)
-3. `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, the second listener).
+1. `HTML` -> `BODY` -> `FORM` -> `DIV` (প্রথম listener টিতে capturing phase `true`):
+2. `P` (target phase, দুইবার ট্রিগার হবে, যেহেতু আমরা দুটি listener সেট করেছি: capturing and bubbling)
+3. `DIV` -> `FORM` -> `BODY` -> `HTML` (bubbling phase, দ্বিতীয় listener)।
 
-There's a property `event.eventPhase` that tells us the number of the phase on which the event was caught. But it's rarely used, because we usually know it in the handler.
+*event* এর একটি প্রপার্টি আছে `event.eventPhase` যার মাধ্যমে আমরা জানতে পারি কোন ধাপটি সম্পন্ন হচ্ছে। কিন্তু এটি খুব কম ব্যবহার করি কেননা আমরা হ্যান্ডেলারের মাধ্যমেই এটি জানতে পারি।
 
-```smart header="To remove the handler, `removeEventListener` needs the same phase"
-If we `addEventListener(..., true)`, then we should mention the same phase in `removeEventListener(..., true)` to correctly remove the handler.
+```smart header="To remove the handler, `removeEventListener` এর জন্য হ্যান্ডেলারের phase একই হতে হবে"
+যদি আমাদের phase এভাবে সেট করি `addEventListener(..., true)`, তাহলে removeEventListener এর জন্যই `removeEventListener(..., true)` লিখতে হবে অন্যথায় এটি কাজ করবে না।
 ```
 
-````smart header="Listeners on same element and same phase run in their set order"
-If we have multiple event handlers on the same phase, assigned to the same element with `addEventListener`, they run in the same order as they are created:
+````smart header="একই এলিমেন্ট এবং একই phase এর জন্য Listeners অর্ডার অনুযায়ী কাজ করে"
+যদি আমাদের কোন এলিমেন্টের জন্য একই phase এর জন্য একাধিক হ্যান্ডেলার অ্যাসাইন করি, তাহলে তারা যেই অর্ডারে লিখা হয়েছে সেভাবেই রান হবে:
 
 ```js
-elem.addEventListener("click", e => alert(1)); // guaranteed to trigger first
+elem.addEventListener("click", e => alert(1)); // এটি প্রথমে রান হবে
 elem.addEventListener("click", e => alert(2));
 ```
 ````
 
 
-## Summary
+## সারাংশ
 
-When an event happens -- the most nested element where it happens gets labeled as the "target element" (`event.target`).
+যখন কোন ইভেন্ট সংগঠিত হয় -- এটি নেস্টেড যে এলিমেন্ট হতে কল হয় তাকে বলা হয় "target element" (`event.target`)।
 
-- Then the event moves down from the document root to `event.target`, calling handlers assigned with `addEventListener(..., true)` on the way (`true` is a shorthand for `{capture: true}`).
-- Then handlers are called on the target element itself.
-- Then the event bubbles up from `event.target` to the root, calling handlers assigned using `on<event>` and `addEventListener` without the 3rd argument or with the 3rd argument `false/{capture:false}`.
+- তারপর এটি document root নোড হতে নিচের দিকে `event.target` পর্যন্ত যায়, যখন হ্যান্ডেলারটি `addEventListener(..., true)` এভাবে কল করা হয় (`{capture: true}` এর সংক্ষিপ্তরূপ `true`)।
+- তারপর "target element" কল হয়।
+- আবার যদি আমরা হ্যান্ডেলারটি ৩য় প্যারামিটারটি ছাড়া অথবা (`{capture: false}`/`true`) এভাবে কল করি তখন এটি bubbles আকারে `event.target` এর উপর হতে document root নোড পর্যন্ত যায়।
 
-Each handler can access `event` object properties:
+সকল ক্ষেত্রেই আমরা `event` অবজেক্টটি পাব:
 
-- `event.target` -- the deepest element that originated the event.
-- `event.currentTarget` (=`this`) -- the current element that handles the event (the one that has the handler on it)
-- `event.eventPhase` -- the current phase (capturing=1, target=2, bubbling=3).
+- `event.target` -- যে এলিমেন্টে ইভেন্টটি সংগঠিত হয়েছে।
+- `event.currentTarget` (=`this`) -- যেখানে ইভেন্টটি অ্যাসাইন করা হয়েছে (এখানে আমরা হ্যান্ডেলারটিও অ্যাসাইন করি)।
+- `event.eventPhase` -- current phase (capturing=1, target=2, bubbling=3)।
 
-Any event handler can stop the event by calling `event.stopPropagation()`, but that's not recommended, because we can't really be sure we won't need it above, maybe for completely different things.
+হ্যান্ডেলারে `event.stopPropagation()` কল করার মাধ্যমে আমরা ইভেন্ট কে থামাতে পারি, তবে এই ব্যাপারে আমাদের সতর্ক থাকতে হবে, কেননা এর ফলে আমাদের পরবর্তী মোডিফিকেশন জটিল হয়ে যেতে পারে।
 
-The capturing phase is used very rarely, usually we handle events on bubbling. And there's a logic behind that.
+সাধারণত আমরা ক্যাপচারিং ধাপটি তেমন ব্যবহার করি না, আমরা bubbling এর মধ্যমেই লজিক ঠিক করতে পারি।
 
-In real world, when an accident happens, local authorities react first. They know best the area where it happened. Then higher-level authorities if needed.
+আমাদের বাস্তবিক ক্ষেত্রে কোন দূর্ঘটনা ঘটলে প্রথমে স্থানীয় কর্তৃপক্ষকে জানায়। কেননা তারাই প্রথমে এটি দেখভাল করতে পারে। তারপর দরকার হলে উর্ধদন কর্তৃপক্ষকে জানায়।
 
-The same for event handlers. The code that set the handler on a particular element knows maximum details about the element and what it does. A handler on a particular `<td>` may be suited for that exactly `<td>`, it knows everything about it, so it should get the chance first. Then its immediate parent also knows about the context, but a little bit less, and so on till the very top element that handles general concepts and runs the last one.
+ইভেন্ট হ্যান্ডেলারকেও আপনি অনুরূপ বিবেচনা করতে পারেন, এজন্য আমাদের জন্য *capturing phase* এর চেয়ে *bubbling phase* টিই বেশি সুবিধাজনক।
 
-Bubbling and capturing lay the foundation for "event delegation" -- an extremely powerful event handling pattern that we study in the next chapter.
+"event delegation" একটি অত্যন্ত শক্তিশালী ইভেন্ট হ্যান্ডলিং প্যাটার্ন এর মূল ভিত্তিই হল Bubbling এবং capturing  পরবর্তী অধ্যায়ে আমরা এ সম্পর্কে জানব।