fix small problems, line syncing

Author: mahdiHash

2-ui/2-events/05-dispatch-events/article.md

@@ -2,9 +2,7 @@
 
 ما نه تنها می توانیم هندلر ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوااسکریپت نیز تولید کنیم.
 
-از custom events می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد:
-
-باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
+از custom events می توان برای ایجاد "مولفه های گرافیکی" استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.
 
 ما می‌توانیم نه تنها event های کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین event های داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای تست خودکار نرم افزار مفید باشد.
 
@@ -13,17 +11,20 @@
 کلاس های event متعلق به زبان یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه آن، کلاس درون‌ساخت [Event](https://dom.spec.whatwg.org/#events) است.
 
 ما می توانیم اشیاء event را به این صورت ایجاد کنیم: 
+
 ```js
 let event = new Event(type[, options]);
 ```
+
 پارامتر ها: 
 
 - *type*: event type,  یک رشته مانند `"click"` .
 - *options*: شی ای با دو ویژگی اختیاری.
-- *Bubbles*:اگر true  بود یعنی  bubbled  می شود. 
-- *cancelable (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
-- به صورت پیش فرض: `{bubbles: false, cancelable: false}`.
-- 
+  - *Bubbles*:اگر true  بود یعنی  bubbled  می شود. 
+  - *cancelable (true/false)*: اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،
+  
+  به صورت پیش فرض: `{bubbles: false, cancelable: false}`.
+
   ## dispatchEvent
 
 پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی `elem.dispatchEvent(event)` اجرا کنیم.
@@ -47,13 +48,11 @@ let event = new Event(type[, options]);
 
  ویژگی 'event.isTrusted' برای رویدادهایی که از اقدامات کاربر واقعی ناشی می شوند 'true' و برای رویدادهای تولید شده توسط اسکریپت 'false' است.
 ```
-
 ## مثالی از Bubbling 
 
-
 می‌توانیم یک bubbling event با نام `"hello"` ایجاد کنیم و آن را در `document` بگیریم.
 
-تنها چیزی که نیاز داریم این است که `bubbles` را روی "true" تنظیم کنیم:
+تنها چیزی که نیاز داریم این است که `bubbles` را روی `true` تنظیم کنیم:
 
 ```html run no-beautify
 <h1 id="elem">Hello from the script!</h1>
@@ -127,9 +126,11 @@ let event = new Event("click", {
 alert(event.clientX); // undefined, the unknown property is ignored!
 */!*
 ```
+
 ااز نظر فنی، می‌توانیم با اختصاص مستقیم `event.clientX=100` پس از ایجاد، آن را حل کنیم. بنابراین این موضوع راحت و پیروی از قوانین است. event های ایجاد شده توسط مرورگر همیشه از نوع مناسبی هستند.
 
-للیست کاملی از  propertyها برای eventهای مختلف UI در مشخصات زبان وجود دارد، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
+لیست کاملی از  propertyها برای eventهای مختلف UI در مشخصات زبان وجود دارد، برای مثال، [MouseEvent](https://www.w3.org/TR/uievents/#mouseevent).
+
 ## event شخصی‌سازی‌شد
 
 برای انواع events های کاملاً جدید خودمان مانند  `"hello"` باید از `new CustomEvent` استفاده کنیم. از نظر فنی [CustomEvent](https://dom.spec.whatwg.org/#customevent) با `Event` یکسان است،البته با یک استثنا.
@@ -154,6 +155,7 @@ alert(event.clientX); // undefined, the unknown property is ignored!
   }));
 </script>
 ```
+
 ویژگی `detail` می تواند هر داده ای را داشته باشد. از نظر فنی می‌توانیم آن را تنظیم نکنیم، زیرا می‌توانیم هر ویژگی را پس از ایجاد یک شی `new Event` معمولی به آن اختصاص دهیم. اما `CustomEvent` فیلد  `detail` ویژه ای را برای جلوگیری از conflicts با سایر property های event فراهم می کند.
 
 علاوه بر این، کلاس event توضیح می‌دهد که «چه نوع رویدادی» است، و اگر event سفارشی باشد، باید از  `CustomEvent` استفاده کنیم تا مشخص شود که چیست.
@@ -212,11 +214,10 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 
 استثنا قابل توجه زمانی است که یک رویداد از درون رویداد دیگری آغاز می شود، به عنوان مثال: با استفاده از `dispatchEvent` چنین رویدادهایی بلافاصله پردازش می‌شوند: کنترل‌کننده‌های رویداد جدید فراخوانی می‌شوند و سپس مدیریت رویداد فعلی از سر گرفته می‌شود.
 
-به عنوان مثال، در کد زیر، رویداد `menu-open` در حین کلیک فعال می شود.
+به عنوان مثال، در کد زیر، رویداد `menu-open` در حین `onclick` فعال می شود.
 
-بدون اینکه برای هندلر `onclick` صبر کند تا تمام شود، پردازش می‌ شود:   
+بدون اینکه برای `onclick` هندلر صبر کند تا تمام شود، شروع به پردازش می شود:   
 
-بدون اینکه برای `onclick` هندلر صبر کند تا تمام شود، شروع به process شدن میشود:   
 
 ```html run autorun
 <button id="menu">Menu (click me)</button>
@@ -264,12 +265,11 @@ alert(event.clientX); // undefined, the unknown property is ignored!
   document.addEventListener('menu-open', () => alert('nested'));
 </script>
 ```
+
 حالا `dispatchEvent` یه صورت asynchronously بعد از اینکه اجرای کد فعلی به اتمام رسید،  run  میشود، که شامل `menu.onclick`. پس event handler ها به صورت جدت و مستقل فعالیت میکنند. 
 
 خروجی به این ترتیب خواهد بود: 1 -> 2 -> nested.
 
-
-
 ## خلاصه
 
 برای تولید یک event code، ابتدا باید یک event object ایجاد کنیم.
@@ -291,4 +291,4 @@ alert(event.clientX); // undefined, the unknown property is ignored!
 - به عنوان یک dirty hack برای اینکه کتابخانه های شخص ثالث به روش مورد نیاز کار کنند، اگر ابزارهای تعامل دیگری را ارائه ندهند.
 - برای تست خودکار، روی دکمه "click the button" در اسکریپت و ببینید که آیا رابط به درستی واکنش نشان می دهد.
 
- همک چنین custom events با نام خود ما اغلب برای مقاصد معماری ایجاد می شوند تا نشان دهند که چه اتفاقی در منوها، اسلایدر ها و غیره می افتد.
+ همچنین eventهای سفارشی با نام خود ما اغلب برای مقاصد معماری ایجاد می شوند تا نشان دهند که چه اتفاقی در منوها، اسلایدرها و غیره می افتد.