update article.md -- event delegation

Author: MHMighani

2-ui/2-events/03-event-delegation/article.md

@@ -1,19 +1,21 @@
 
 # Event delegation
 
-Capturing and bubbling allow us to implement one of the most powerful event handling patterns called *event delegation*.
+کپچر (capture) و 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` to see where the event actually happened and handle it.
+در هندلری که اختصاص میدهیم با استفاده از `event.target` محل وقوع رویداد را متوجه میشویم و بنابراین میتوانیم آنرا هندل کنیم.
 
 Let's see an example -- the [Ba-Gua diagram](http://en.wikipedia.org/wiki/Ba_gua) reflecting the ancient Chinese philosophy.
+بیاید تا با هم یک مثال رو بررسی کنیم -- [دیاگرام Ba-Gua] (http://en.wikipedia.org/wiki/Ba_gua) که یک فلسفه چینی باستانی رو نشون میده
 
-Here it is:
+به این شکل :
 
 [iframe height=350 src="bagua" edit link]
 
 The HTML is like this:
+اچ‌تی‌ام‌ال به این صورت هست:
 
 ```html
 <table>
@@ -30,15 +32,15 @@ The HTML is like this:
 </table>
 ```
 
-The table has 9 cells, but there could be 99 or 9999, doesn't matter.
+جدول 9 سلول دارد اما این عدد امکان دارد 99 یا 9999 باشد. مهم نیست.
 
-**Our task is to highlight a cell `<td>` on click.**
+**ماموریت ما این است که سلول `<td>` که روی آن کلیک شد را هایلایت کنیم**
 
-Instead of assign an `onclick` handler to each `<td>` (can be many) -- we'll setup the "catch-all" handler on `<table>` element.
+به جای آنکه هندلر `onclick` را به هریک از تگ های `<td>` اساین کنیم (که ممکن است تعداد زیادی از آنها داشته باشیم)، هندلر "catch-all" را برروی المنت `<table>` اساین میکنیم.
 
-It will use `event.target` to get the clicked element and highlight it.
+اینکار باعث استفاده از `event.target` برای گرفتن المنت کلیک شده و هایلایت آن می‌شود.
 
-The code:
+کد:
 
 ```js
 let selectedTd;
@@ -62,13 +64,13 @@ function highlight(td) {
 }
 ```
 
-Such a code doesn't care how many cells there are in the table. We can add/remove `<td>` dynamically at any time and the highlighting will still work.
+این کد به اینکه چند سلول داخل جدول قرار دارد اهمیتی نمیدهد. میتوانیم المنت‍‌های `<td>` رو به شکل دینامیکی هر زمان که خواستیم اضافه/کم کنیم و همچنان هایلایت کردن کار خواهد کرد.
 
-Still, there's a drawback.
+اما همچنان یک اشکال وجود دارد.
 
-The click may occur not on the `<td>`, but inside it.
+کلیک ممکن است نه روی `<td>` بلکه درون آن اتفاق بیفتد.
 
-In our case if we take a look inside the HTML, we can see nested tags inside `<td>`, like `<strong>`:
+در اینصورت اگر به داخل HTML نگاهی بندازیم میتوانیم تگ های درون `<td>` را ببینمی. مثل المنت `<strong>`
 
 ```html
 <td>
@@ -79,13 +81,13 @@ In our case if we take a look inside the HTML, we can see nested tags inside `<t
 </td>
 ```
 
-Naturally, if a click happens on that `<strong>` then it becomes the value of `event.target`.
+طبیعتا زمانی که یک کلیک بر روی `<strong>` انجام میشود آنگاه مقدار `event.target` برابر آن خواهد شد.
 
 ![](bagua-bubble.svg)
 
-In the handler `table.onclick` we should take such `event.target` and find out whether the click was inside `<td>` or not.
+در هندلر `table.onclick` ما باید مقدار `event.target` را گرفته و از این طریق مشخص کنیم که آیا کلیک درون `<td>` اتفاق افتاده یا نه.
 
-Here's the improved code:
+کد بهبود یافته شده:
 
 ```js
 table.onclick = function(event) {
@@ -99,27 +101,28 @@ 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 `<td>` on the way up from the source element.
 2. If `event.target` is not inside any `<td>`, then the call returns immediately, as there's nothing to do.
 3. In case of nested tables, `event.target` may be a `<td>`, but lying outside of the current table. So we check if that's actually *our table's* `<td>`.
 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 `<td>` in the table.
+در نتیحه ما یک کد هایلایتر سریع و کارا داریم که عملکرد آن به تعداد سلول‌های `<td>` در جدول ارتباطی ندارد.
 
 ## Delegation example: actions in markup
 
-There are other uses for event delegation.
+استفاده‌های دیگری هم برای 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
 <button *!*data-action="save"*/!*>Click to Save</button>
 ```
 
-The handler reads the attribute and executes the method. Take a look at the working example:
+هندلر اتریبیوت را خوانده و متد را اجرا میکند. نگاهی به این مثال واقعی بیندازید:
 
 ```html autorun height=60 run untrusted
 <div id="menu">
@@ -244,27 +247,27 @@ We can combine multiple behaviors on a single element as well.
 
 The "behavior" pattern can be an alternative to mini-fragments of JavaScript.
 
-## Summary
+## خلاصه
 
-Event delegation is really cool! It's one of the most helpful patterns for DOM events.
+الگوی Event delegation واقعا باحال است! این الگو یکی از مفیدترین الگوها برای ایونت‌های DOM است.
 
-It's often used to add the same handling for many similar elements, but not only for that.
+این الگو معمولا برای کنترل تعداد زیادی از المان‌های مشابه استفاده می‌شود اما این تنها کاربرد آن نیست.
 
-The algorithm:
+الگوریت:
 
-1. Put a single handler on the container.
-2. In the handler -- check the source element `event.target`.
-3. If the event happened inside an element that interests us, then handle the event.
+1. یک هندلر برای کل کانتینر قرار دهید.
+2. در هندلر المنت سورس را از طریق `event.target` بیابید.
+4. اگر ایونت درون المنتی که موردنظر ماست اتفاق افتاده است آنگاه ایونت را هندل کنید.
 
-Benefits:
+فواید:
 
 ```compare
-+ Simplifies initialization and saves memory: no need to add many handlers.
-+ Less code: when adding or removing elements, no need to add/remove handlers.
-+ DOM modifications: we can mass add/remove elements with `innerHTML` and the like.
++ عدم نیاز به اضافه کردن تعداد زیادی هندلر باعث ذخیره حافظه و ساده‌سازی شروع میشود
++ کد کمتر: زمان اضافه و کم کردن المان‌ها نیازی به تغییر در هندلرها نیست.
++ تغییرات DOM: میتواینم با استفاده از `innerHTML` و ابزارهای مشابه آن تعداد زیادی المان را کم/زیاد کنیم.
 ```
 
-The delegation has its limitations of course:
+بدون شک این الگو هم محدودیت‌های خودش را دارد:
 
 ```compare
 - First, the event must be bubbling. Some events do not bubble. Also, low-level handlers should not use `event.stopPropagation()`.