diff --git a/2-ui/2-events/03-event-delegation/article.md b/2-ui/2-events/03-event-delegation/article.md index df086f24b..822519651 100644 --- a/2-ui/2-events/03-event-delegation/article.md +++ b/2-ui/2-events/03-event-delegation/article.md @@ -1,19 +1,20 @@ -# Event delegation +# ইভেন্ট ডেলিগেশন -Capturing and bubbling allow us to implement one of most powerful event handling patterns called *event delegation*. +Capturing এবং bubbling এর মাধ্যমে ইভেন্ট সমূহকে সহজে হ্যান্ডেল করার একটি উপায় হল *event delegation*। -The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them -- we put a single handler on their common ancestor. -In the handler we get `event.target`, see where the event actually happened and handle it. +আইডিয়াটি হল যদি আমাদের একই ধরণের অনেক এলিমেন্ট কোন একটি প্যারেন্ট এলিমেন্টের অধীনে থাকে এবং তাদের একইভাবে হ্যান্ডেল করা লাগে তাহলে আমরা একটি হ্যান্ডেলারের মাধ্যমে তাদের হ্যান্ডেল করতে পারি। -Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy. +হ্যান্ডেলারে আমরা `event.target` কে পাব, যার মাধ্যমে আমরা জানতে পারব কোন এলিমেন্টে ইভেন্টটি সংগঠিত হয়েছে এবং তার উপর ভিত্তি করে আমরা এটিকে হ্যান্ডেল করতে পারব। -Here it is: +একটি উদাহরণ দেখি -- [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) এটি একটি চাইনিজ ফিলোসপি। + +এখানে দেখুন: [iframe height=350 src="bagua" edit link] -The HTML is like this: +HTML পেজটি হবে এমন: ```html @@ -30,45 +31,45 @@ The HTML is like this:
``` -The table has 9 cells, but there could be 99 or 9999, doesn't matter. +এখানে টেবল টিতে ৯ টি ঘর আছে, কিন্তু এখানে ৯৯ বা ৯৯৯ টি থাকতে পারে, এটি আমাদের জন্য ব্যাপার না। -**Our task is to highlight a cell `` on click.** +**আমাদের টাস্ক হল `` তে ক্লিক হলে তা হাইলাইট হবে** -Instead of assign an `onclick` handler to each `` (can be many) -- we'll setup the "catch-all" handler on `` element. +আমরা প্রতিটি `
` তে `onclick` হ্যান্ডেলার অ্যাসাইনের মাধ্যমে এটি করতে পারি -- তবে তার পরিবর্তে আমরা এটি এমন ভাবে করব যার মাধ্যমে `` এলিমেন্ট হতে একটি হ্যান্ডেলারের মাধ্যমে সব তার সকল চাইল্ড এলিমেন্ট কে অ্যাক্সেস করব। -It will use `event.target` to get the clicked element and highlight it. +আমরা `event.target` এর মাধ্যমে কোন এলিমেন্টটি ক্লিকড হয়েছে তা জানতে পারি। -The code: +কোডটি হবে: ```js let selectedTd; *!* table.onclick = function(event) { - let target = event.target; // where was the click? + let target = event.target; // যেখানে ইভেন্টটি ঘটেছে - if (target.tagName != 'TD') return; // not on TD? Then we're not interested + if (target.tagName != 'TD') return; // TD ট্যাগ যাচাই - highlight(target); // highlight it + highlight(target); // এলিমেন্টটিকে হাইলাইট }; */!* function highlight(td) { - if (selectedTd) { // remove the existing highlight if any + if (selectedTd) { // পূর্বের হাইলাইট এলিমেন্টটি রিমুভড selectedTd.classList.remove('highlight'); } selectedTd = td; - selectedTd.classList.add('highlight'); // highlight the new td + selectedTd.classList.add('highlight'); // নতুন হাইলাইট এলিমেন্টটি } ``` -Such a code doesn't care how many cells there are in the table. We can add/remove `
` dynamically at any time and the highlighting will still work. +এখানে টেবল এ কতটি ঘর আছে তা আমাদের চিন্তা করা লাগবে না, আমাদের কোডটি ডায়নামিক্যালি *table* এর সকল ঘরকে হাইলাইটেড করতে পারবে। -Still, there's a drawback. +কিন্তু, এটির কিছু সীমাবদ্ধতা আছে। -The click may occur not on the ``, but inside it. +`` এর মধ্যে আরো কোন এলিমেন্ট থাকতে পারে, এবং আমাদের ক্লিকড `` এর চাইল্ড এলিমেন্টে সংগঠিত হতে পারে। -In our case if we take a look inside the HTML, we can see nested tags inside ``, like ``: +উপরে বর্ণিত HTML এ আমরা দেখছি `` এর মধ্যে `` ট্যাগ: ```html @@ -79,13 +80,13 @@ In our case if we take a look inside the HTML, we can see nested tags inside ` ``` -Naturally, if a click happens on that `` then it becomes the value of `event.target`. +বাস্তবে, আমরা যখন `` এ ক্লিক করি তখন এটিই `event.target`। ![](bagua-bubble.svg) -In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `` or not. +আমাদের হ্যান্ডেলারটি `table.onclick` এমন ভাবে লিখতে হবে যাতে `event.target` টি কোন `` এর চাইল্ড এলিমেন্টে ক্লিক হয়েছে তা কিনা জানতে পারি। -Here's the improved code: +এখানে পরিমার্জিত কোডটি দেখানো হল: ```js table.onclick = function(event) { @@ -99,27 +100,26 @@ table.onclick = function(event) { }; ``` -Explanations: -1. The method `elem.closest(selector)` returns the nearest ancestor that matches the selector. In our case we look for `` on the way up from the source element. -2. If `event.target` is not inside any ``, then the call returns immediately, as there's nothing to do. -3. In case of nested tables, `event.target` may be a ``, but lying outside of the current table. So we check if that's actually *our table's* ``. -4. And, if it's so, then highlight it. - -As the result, we have a fast, efficient highlighting code, that doesn't care about the total number of `` in the table. +ব্যাখ্যা: +1. `elem.closest(selector)` এর সাহয্যে কোন এলিমেন্ট কি ঐ সিলেক্টরের চাইল্ড এলিমেন্ট কিনা জানতে পারি। এক্ষেত্রে আমরা এলিমেন্টটি কি `` এর অধীনে কিনা যাচাই করছি। +2. `event.target` যদি `` এর অধীনে না হয়, তাহলে হ্যান্ডেলারটি আর এক্সিকিউট হবে না। +3. অনেক সময় টেবলটি নেস্টেড হতে পারে, এক্ষেত্রে আমরা যাচাই করব `event.target` কি আমাদের টেবল এর কিনা। +4. সর্বশেষে এটি হাইলাইট ফাংশনটি কল করবে। -## Delegation example: actions in markup +এর ফলে আমাদের কোডটি হবে সহজবোধ্য, পরিবর্তনযোগ্য এবং দ্রুত। +## ইভেন্ট ডেলিগেশনের আরো উদাহরণ: -There are other uses for event delegation. +ইভেন্ট ডেলিগেশনের আরো বিভিন্ন ব্যবহার আছে। -Let's say, we want to make a menu with buttons "Save", "Load", "Search" and so on. And there's an object with methods `save`, `load`, `search`... How to match them? +ধরুন, আমরা মেনু বাটন বানাতে চাই যেমন "Save", "Load", "Search" ইত্যাদি, এবং আমাদের একটি অবজেক্ট আছে যার মেথড সমূহ হল `save`, `load`, `search`... কিভাবে তাদের মিলাতে পারি? -The first idea may be to assign a separate handler to each button. But there's a more elegant solution. We can add a handler for the whole menu and `data-action` attributes for buttons that has the method to call: +আমাদের মাথায় প্রথমে যে আইডিয়াটি আসতে পারে সেটি হল প্রত্যেক বাটনের জন্য আলাদা হ্যান্ডেলার। কিন্তু এটির আরো সহজবোধ্য এবং পরিবর্তনযোগ্য সমাধান আছে। মেন্যুটির জন্য একটি হ্যান্ডেলার অ্যাসাইনের মাধ্যমেই আমরা এটি করতে পারে এবং `data-action` অ্যাট্রিবিউটের সাহায্যে মেথডের নামটি অ্যাসাইন করে দিতে পারি: ```html ``` -The handler reads the attribute and executes the method. Take a look at the working example: +হ্যান্ডেলার অ্যাট্রিবিউট হতে মেথডটি অ্যাক্সিকিউট করবে। এখানের কোডটি দেখুন: ```html autorun height=60 run untrusted