Dispatchکردن eventهای شخصی سازی شده

ما نه تنها می توانیم هندلر ها را اختصاص دهیم، بلکه می توانیم رویدادها را از جاوااسکریپت نیز تولید کنیم.

از custom events می توان برای ایجاد “مولفه های گرافیکی” استفاده کرد. به عنوان مثال، یک عنصر ریشه از منوی مبتنی بر JS خودمان ممکن است رویدادهایی را ایجاد کند که می‌گوید چه اتفاقی در منو می‌افتد: باز کردن (باز کردن منو)، انتخاب (یک مورد انتخاب شده است) و غیره. کد دیگری ممکن است به event ها گوش دهد و آنچه را که در منو اتفاق می افتد مشاهده کند.

ما می‌توانیم نه تنها event های کاملاً جدیدی را که برای اهداف خود اختراع می‌کنیم، بلکه همچنین event های داخلی مانند کلیک، پایین آوردن ماوس و غیره را ایجاد کنیم. ممکن است برای تست خودکار نرم افزار مفید باشد.

Event constructor

کلاس های event متعلق به زبان یک سلسله مراتب را تشکیل می دهند، مشابه کلاس های عنصر DOM. ریشه آن، کلاس درون‌ساخت Event است.

ما می توانیم اشیاء event را به این صورت ایجاد کنیم:

let event = new Event(type[, options]);

پارامتر ها:

• type: event type, یک رشته مانند "click" .

• options: شی ای با دو ویژگی اختیاری.

  • Bubbles:اگر true بود یعنی bubbled می شود.
  • cancelable (true/false): اگر ویزگی مقدار true را داشت عمل پیش فرض آن لغو میشود،

  به صورت پیش فرض: {bubbles: false, cancelable: false}.

  dispatchEvent

پس از ایجاد یک event، باید آن را روی یک element با استفاده از فراخوانی elem.dispatchEvent(event) اجرا کنیم.

سپس هندلر ها به آن واکنش نشان می دهند که گویی یک event معمولی مرورگر است. اگر event با bubble flag ها ایجاد شده باشد، bubbled می شود.

در مثال زیر رویداد click در جاوااسکریپت آغاز می شود. هندلر به همان روشی کار می کند که اگر روی دکمه کلیک شده باشد:

<button id="elem" onclick="alert('Click!');">Autoclick</button>

<script>

  let event = new Event("click");
  elem.dispatchEvent(event);
</script>

مثالی از Bubbling

می‌توانیم یک bubbling event با نام "hello" ایجاد کنیم و آن را در document بگیریم.

تنها چیزی که نیاز داریم این است که bubbles را روی true تنظیم کنیم:

<h1 id="elem">Hello from the script!</h1>

<script>
  // catch on document...
  document.addEventListener("hello", function(event) { // (1)
    alert("Hello from " + event.target.tagName); // Hello from H1
  });

  // ...dispatch on elem!
  let event = new Event("hello", {bubbles: true}); // (2)
  elem.dispatchEvent(event);

  // the handler on document will activate and display the message.

</script>

نکات:

1. باید از addEventListener برای شخصی‌سازی eventها استفاده کرد، زیرا on<event> فقط برای eventهای متعلق به زبان وجود دارد و document.onhello کار نمی کند.
2. باید bubbles:true را تنظیم کنیم وگرنه رویداد bubble up نخواهد شد.

مکانیک bubbling برای event درون‌ساخت (click) و event شخصی‌سازه‌شده (hello) یکسان است. هم چنین مراحلی برای capturing و bubbling نیز وجود دارد.

MouseEvent, KeyboardEvent and others

موارد زیر شامل یک لیست کوتاه از کلاس هایی برای UI Events از UI Event specification هستند:

• UIEvent
• FocusEvent
• MouseEvent
• WheelEvent
• KeyboardEvent
• …

اگر میخواهید event به وجود بیاوریم، باید به جای new Event از کلاس های بالا استفاده کنیم. برای مثال new MouseEvent("click").

انتخاب constructor درست این امکان را میدهد که property های استاندارد را برای هر نوع از event مشخص کنیم.

مانند clientX/clientY برای mouse event: