translate Event delegation article

Author: afilahkle

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

@@ -1,91 +1,91 @@
 
-# Event delegation
+# تفويض الحدث
 
-Capturing and bubbling allow us to implement one of most powerful event handling patterns called *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.
+لنرى مثالًا - [رسم با-غوا](http://en.wikipedia.org/wiki/Ba_gua) يعكس الفلسفة الصينية القديمة.
 
-Here it is:
+ها هو:
 
 [iframe height=350 src="bagua" edit link]
 
-The HTML is like this:
+HTML مثل هذا:
 
 ```html
 <table>
   <tr>
-    <th colspan="3"><em>Bagua</em> Chart: Direction, Element, Color, Meaning</th>
+    <th colspan="3">جدول <em>Bagua</em>: الاتجاه ، العنصر ، اللون ، المعنى</th>
   </tr>
   <tr>
-    <td class="nw"><strong>Northwest</strong><br>Metal<br>Silver<br>Elders</td>
+    <td class="nw"><strong>الشمال الغربي</strong><br>معدن<br>فضة<br>كبار السن</td>
     <td class="n">...</td>
     <td class="ne">...</td>
   </tr>
-  <tr>...2 more lines of this kind...</tr>
-  <tr>...2 more lines of this kind...</tr>
+  <tr>...2 سطرين إضافيين من هذا النوع ...</tr>
+  <tr>...2 سطرين إضافيين من هذا النوع ...</tr>
 </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>` (يمكن أن يكون كثيرًا) - سنقوم بإعداد المعالج "الشامل" على عنصر `<table>`.
 
-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'); // تسليط الضوء على 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>
 *!*
-  <strong>Northwest</strong>
+  <strong>الشمال الغربي</strong>
 */!*
   ...
 </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,33 +99,33 @@ 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.
+تفسيرات:
+1. يعيد الأسلوب `elem.closest(selector)` السلف الأقرب الذي يطابق المحدد. في حالتنا نبحث عن `<td>` في الطريق لأعلى من العنصر المصدر.
+2. إذا لم يكن `event.target` داخل أي `<td>` ، فإن الاستدعاء يعود فورًا ، لأنه لا يوجد شيء يمكن القيام به.
+3. في حالة الجداول المتداخلة ، قد يكون `event.target` هو `<td>` ، ولكن يكمن خارج الجدول الحالي. لذلك نتحقق مما إذا كان هذا هو `<td>` *لجدولنا* فعلاً.
+4. وإذا كان كذلك ، فتسلط الضوء عليه.
 
-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.
+هناك استخدامات أخرى لتفويض الحدث.
 
-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` ... كيفية مطابقتها؟
 
-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>
+<button *!*data-action="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">
-  <button data-action="save">Save</button>
-  <button data-action="load">Load</button>
-  <button data-action="search">Search</button>
+  <button data-action="save">حفظ</button>
+  <button data-action="load">تحميل</button>
+  <button data-action="search">بحث</button>
 </div>
 
 <script>
@@ -136,15 +136,15 @@ The handler reads the attribute and executes the method. Take a look at the work
     }
 
     save() {
-      alert('saving');
+      alert('جاري الحفظ');
     }
 
     load() {
-      alert('loading');
+      alert('جاري التحميل');
     }
 
     search() {
-      alert('searching');
+      alert('جاري البحث');
     }
 
     onClick(event) {
@@ -161,65 +161,65 @@ The handler reads the attribute and executes the method. Take a look at the work
 </script>
 ```
 
-Please note that `this.onClick` is bound to `this` in `(*)`. That's important, because otherwise `this` inside it would reference the DOM element (`elem`), not the `Menu` object, and `this[action]` would not be what we need.
+يرجى ملاحظة أن `this.onClick` مرتبط بـ `this` في `(*)`. هذا مهم ، لأنه وإلا فإن `this` داخله سيشير إلى عنصر DOM (`elem`) ، وليس كائن `Menu` ، ولن يكون `this[action]` هو ما نحتاجه.
 
-So, what advantages does delegation give us here?
+إذن ، ما هي المزايا التي يمنحنا التفويض هنا؟
 
 ```compare
-+ We don't need to write the code to assign a handler to each button. Just make a method and put it in the markup.
-+ The HTML structure is flexible, we can add/remove buttons at any time.
++ ليس علينا كتابة الكود لتعيين معالج لكل زر. فقط قم بعمل طريقة وضعها في الترميز.
++ هيكل HTML مرن ، يمكننا إضافة / إزالة الأزرار في أي وقت.
 ```
 
-We could also use classes `.action-save`, `.action-load`, but an attribute `data-action` is better semantically. And we can use it in CSS rules too.
+يمكننا أيضًا استخدام الفئات `.action-save` و `.action-load` ، ولكن السمة `data-action` هي أفضل من الناحية الدلالية. ويمكننا استخدامه في قواعد CSS أيضًا.
 
-## The "behavior" pattern
+## نمط "السلوك"
 
-We can also use event delegation to add "behaviors" to elements *declaratively*, with special attributes and classes.
+يمكننا أيضًا استخدام تفويض الحدث لإضافة "سلوكيات" إلى العناصر *بشكل تعريفي* ، مع سمات وفئات خاصة.
 
-The pattern has two parts:
-1. We add a custom attribute to an element that describes its behavior.
-2. A document-wide handler tracks events, and if an event happens on an attributed element -- performs the action.
+النمط له جزأين:
+1. نضيف سمة مخصصة إلى عنصر يصف سلوكه.
+2. يتتبع معالج على مستوى المستند الأحداث ، وإذا حدث حدث على عنصر مسمى - يؤدي الإجراء.
 
-### Behavior: Counter
+### السلوك: العداد
 
-For instance, here the attribute `data-counter` adds a behavior: "increase value on click" to buttons:
+على سبيل المثال ، هنا تضيف السمة `data-counter` سلوكًا: "زيادة القيمة عند النقر" على الأزرار:
 
 ```html run autorun height=60
-Counter: <input type="button" value="1" data-counter>
-One more counter: <input type="button" value="2" data-counter>
+العداد: <input type="button" value="1" data-counter>
+عداد آخر: <input type="button" value="2" data-counter>
 
 <script>
   document.addEventListener('click', function(event) {
 
-    if (event.target.dataset.counter != undefined) { // if the attribute exists...
-      event.target.value++;
+    if (event.target.dataset.counter != undefined) { // إذا كانت السمة موجودة ...
+    event.target.value++;
     }
 
   });
 </script>
 ```
 
-If we click a button -- its value is increased. Not buttons, but the general approach is important here.
+إذا قمنا بالنقر على زر - يتم زيادة قيمته. ليس الأزرار ، ولكن النهج العام مهم هنا.
 
-There can be as many attributes with `data-counter` as we want. We can add new ones to HTML at any moment. Using the event delegation we "extended" HTML, added an attribute that describes a new behavior.
+يمكن أن يكون هناك العديد من السمات مع `data-counter` كما نريد. يمكننا إضافة جديدة إلى HTML في أي لحظة. باستخدام تفويض الحدث ، "قمنا بتوسيع" HTML ، وأضفنا سمة تصف سلوكًا جديدًا.
 
-```warn header="For document-level handlers -- always `addEventListener`"
-When we assign an event handler to the `document` object, we should always use `addEventListener`, not `document.on<event>`, because the latter will cause conflicts: new handlers overwrite old ones.
+```warn header="لمعالجات المستندات المستوى - دائمًا `addEventListener`"
+عندما نعين معالج حدث على كائن `document` ، يجب علينا دائمًا استخدام `addEventListener` ، وليس `<document.on<event` ، لأن الأخير سيسبب تعارضات: المعالجات الجديدة تكتب فوق القديمة.
 
-For real projects it's normal that there are many handlers on `document` set by different parts of the code.
+بالنسبة للمشاريع الحقيقية ، فمن الطبيعي أن يكون هناك العديد من المعالجات على `document` التي تم تعيينها بواسطة أجزاء مختلفة من الكود.
 ```
 
-### Behavior: Toggler
+### السلوك: المفتاح
 
-One more example of behavior. A click on an element with the attribute `data-toggle-id` will show/hide the element with the given `id`:
+مثال آخر على السلوك. سيعرض / يخفي النقر على عنصر بسمة `data-toggle-id` العنصر بالمعرف المعطى:
 
 ```html autorun run height=60
 <button *!*data-toggle-id="subscribe-mail"*/!*>
-  Show the subscription form
+ أظهر نموذج الاشتراك
 </button>
 
 <form id="subscribe-mail" hidden>
-  Your mail: <input type="email">
+ بريدك: <input type="email">
 </form>
 
 <script>
@@ -236,37 +236,37 @@ One more example of behavior. A click on an element with the attribute `data-tog
 </script>
 ```
 
-Let's note once again what we did. Now, to add toggling functionality to an element -- there's no need to know JavaScript, just use the attribute `data-toggle-id`.
+لنلاحظ مرة أخرى ما فعلناه. الآن ، لإضافة وظيفة التبديل إلى عنصر - لا حاجة لمعرفة JavaScript ، فقط استخدم السمة `data-toggle-id`.
 
-That may become really convenient -- no need to write JavaScript for every such element. Just use the behavior. The document-level handler makes it work for any element of the page.
+قد يصبح ذلك مريحًا حقًا - لا حاجة لكتابة JavaScript لكل عنصر من هذا النوع. فقط استخدم السلوك. يجعل المعالج على مستوى المستند عمله لأي عنصر في الصفحة.
 
-We can combine multiple behaviors on a single element as well.
+يمكننا دمج سلوكيات متعددة على عنصر واحد أيضًا.
 
-The "behavior" pattern can be an alternative to mini-fragments of JavaScript.
+يمكن أن يكون نمط "السلوك" بديلاً للشظايا الصغيرة من JavaScript.
 
-## Summary
+## ملخص
 
-Event delegation is really cool! It's one of the most helpful patterns for DOM events.
+تفويض الحدث رائع حقًا! إنه واحد من أكثر الأنماط المفيدة لأحداث 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`.
+3. إذا حدث الحدث داخل عنصر يهمنا ، فقم بمعالجة الحدث.
 
-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()`.
-- Second, the delegation may add CPU load, because the container-level handler reacts on events in any place of the container, no matter whether they interest us or not. But usually the load is negligible, so we don't take it into account.
+- أولاً ، يجب أن يكون الحدث فقاعيًا. بعض الأحداث لا تتدفق. أيضًا ، يجب على المعالجات المنخفضة المستوى عدم استخدام `()event.stopPropagation`.
+- ثانيًا ، قد يضيف التفويض حملًا على وحدة المعالجة المركزية ، لأن معالج المستوى الحاوية يتفاعل مع الأحداث في أي مكان من الحاوية ، بغض النظر عما إذا كانت تهمنا أم لا. ولكن عادة ما يكون الحمل ضئيلًا ، لذلك لا نأخذه في الاعتبار.
 ```