dispatchEvent နည်းလမ်း

dispatchEvent နည်းလမ်းသည် element တစ်ခုပေါ်တွင် အဖြစ်အပျက်တစ်ခုကို တုပဖန်တီးခွင့်ပြုသည်။ ဤသို့ပြုလုပ်ရန် အဘယ်ကြောင့်လိုအပ်သနည်း- ဥပမာ အနေဖြင့် သုံးစွဲသူ၏ ခလုတ်တစ်ခုကိုနှိပ်ခြင်း၊ ဖောင်တစ်ခုကို ပေးပို့ရန်ကြိုးပမ်းခြင်း စသည်တို့ကို တုပဖန်တီးနိုင်သည်။ ဤသို့ပြုလုပ်သောအခါ အဖြစ်အပျက်သည် အမှန်တကယ်အဖြစ်အပျက်နှင့် event.isTrusted ဂုဏ်သတ္တိမှလွဲ၍ ဘာမှမကွာခြားပါ။ စံမဟုတ်သော (သင်ကိုယ်တိုင်တီထွင်ထားသည့်) အမည်များဖြင့် အဖြစ်အပျက်များကို ဖန်တီးပြီး လိုအပ်သောအချိန်တွင် ၎င်းတို့ကို ခေါ်ယူနိုင်သည်။ ဤနည်းလမ်းကို အဖြစ်အပျက်ကို ခေါ်ယူလိုသော element ပေါ်တွင် အသုံးပြုသည်။ ပါရာမီတာအနေဖြင့် ဤနည်းလမ်းသည် new Event constructor ကို အသုံးပြု၍ ဖန်တီးထားသော အဖြစ်အပျက် (object) ကိုလက်ခံရယူသည်။

Syntax

element.dispatchEvent(event);

ဥပမာ

ကျွန်ုပ်တို့တွင် ခလုတ်တစ်ခုရှိသည်ဟုဆိုကြပါစို့။ ထိုခလုတ်ကို နှိပ်လိုက်သောအခါ မက်ဆေ့ချ်တစ်ခုကို ပြသပေးသည်။ ကျွန်ုပ်တို့ ခလုတ်ပေါ်သို့ မောက်စ်ဖြင့် ရွှေ့လာသောအခါ ထိုခလုတ်က သူ့ကို နှိပ်လိုက်သည်ဟု ထင်မှတ်စေရန် ပြုလုပ်ကြည့်ကြပါစို့။

<button id="button">ခလုတ်</button>

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('မက်ဆေ့ချ်');
});

button.addEventListener('mouseover', function() {
	let clickEvent = new Event('click'); // အဖြစ်အပျက်တစ်ခုကိုဖန်တီးသည်
	this.dispatchEvent(clickEvent); // ခလုတ်ပေါ်တွင် ကလစ်ကို တုပဖန်တီးသည်
});

ဥပမာ

သင့်ကိုယ်ပိုင် အဖြစ်အပျက်များ (ကိုယ်ပိုင်အမည်များဖြင့်) ကိုလည်း ဖန်တီးနိုင်ပြီး လိုအပ်သောအချိန်တွင် ၎င်းတို့ကို ခေါ်ယူနိုင်သည်။ ခလုတ်တစ်ခုနှင့် showMessage အဖြစ်အပျက်ကို ချိတ်ဆက်ပြီး မောက်စ်ဖြင့် ရွှေ့လာသောအခါ ထိုအဖြစ်အပျက်ကို စတင်လုပ်ဆောင်စေကြည့်ရအောင်။

<button id="button">ခလုတ်</button>

let button = document.querySelector('#button');

button.addEventListener('showMessage', function() {
	alert('မက်ဆေ့ချ်');
});

button.addEventListener('mouseover', function() {
	let showMessageEvent = new Event('showMessage'); // အဖြစ်အပျက်တစ်ခုကိုဖန်တီးသည်
	this.dispatchEvent(showMessageEvent); // အဖြစ်အပျက်ဖြစ်ပေါ်မှုကို ခေါ်ယူသည်
});