JavaScript တွင် အစိတ်အပိုင်းများသို့ အဖြစ်အပျက် လက်ခံကိုင်တွယ်သူများ ချိတ်ဆက်ခြင်း

ယခု ကျွန်ုပ်တို့၏ DOM အစိတ်အပိုင်းများကို ဝဘ်ဆိုက် အသုံးပြုသူ၏ လုပ်ဆောင်ချက်များကို တုံ့ပြန်နိုင်အောင် သင်ယူကြပါစို့။ ဥပမာ၊ အသုံးပြုသူသည် ကလစ်တစ်ချက် နှိပ်လိုက်သောအခါ၊ ကျွန်ုပ်တို့၏ ကုဒ်မှာ ၎င်းနှိပ်ချက်ကို ကိုင်တွယ်ဖြေရှင်းပြီး ဖန်သားပြင်ပေါ်တွင် သတင်းအချက်အလက် အချို့ကို ပြသပေးရမည်။

JavaScript မှတစ်ဆင့် ခြေရာခံနိုင်သော အသုံးပြုသူ၏ လုပ်ဆောင်ချက်များကို အဖြစ်အပျက်များ ဟုခေါ်သည်။ အဖြစ်အပျက်များမှာ အောက်ပါအတိုင်းဖြစ်နိုင်သည် - စာမျက်နှာအပေါ်ရှိ အစိတ်အပိုင်းတစ်ခုကို မောက်စ်ဖြင့် ကလစ်နှိပ်ခြင်း၊ စာမျက်နှာအပေါ်ရှိ အစိတ်အပိုင်းတစ်ခုသို့ မောက်စ်ဖြင့် နှိပ်ခြင်း သို့မဟုတ် ပြောင်းပြန်အနေဖြင့် - မောက်စ် ကာဆာသည် အစိတ်အပိုင်းမှ ထွက်ခွာသွားခြင်းစသည်တို့ ဖြစ်သည်။ ထို့အပြင်၊ အသုံးပြုသူ၏ လုပ်ဆောင်ချက်များနှင့် မသက်ဆိုင်သော အဖြစ်အပျက်များလည်း ရှိသည်။ ဥပမာ၊ HTML စာမျက်နှာကို ဘရောက်ဇာထဲသို့ လွင့်တင်ပြီးခြင်း အဖြစ်အပျက်။

ဥပမာအနေဖြင့် ကလစ်နှိပ်လိုက်သည့်အခါ စာသားအချို့ ဖန်သားပြင်ပေါ်သို့ ပေါ်လာမည့် ခလုတ်တစ်ခုကို ဖန်တီးကြပါစို့။ ပထမဦးစွာ ခလုတ်၏ HTML ကုဒ်ကို ဖန်တီးပါမည်-

<input id="button" type="submit">

ယခု ခလုတ်သို့ လင့်ခ်တစ်ခုကို ကိန်းရှင်ထဲသို့ ရယူပါမည်-

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

ယခု ကျွန်ုပ်တို့၏ခလုတ်ကို ၎င်းအား ကလစ်နှိပ်လိုက်သောအခါ တုံ့ပြန်မှု သတ်မှတ်ပေးရန် လိုအပ်သည်။ ဤအတွက် JavaScript တွင် အထူးနည်းလမ်းတစ်ခုရှိသည် - addEventListener, ပထမပါရာမီတာအနေဖြင့် အဖြစ်အပျက်၏အမည်ကို လက်ခံသည် (ခလုတ်ကို ကလစ်နှိပ်ခြင်းသည် အမည် 'click' ရှိသည်)၊ ဒုတိယပါရာမီတာအနေဖြင့် - လုပ်ဆောင်ချက်-ကော်ဘက်၊ ထိုအဖြစ်အပျက် ဖြစ်ပွားသည့်အခါ လုပ်ဆောင်သွားမည်ဖြစ်သည်။

ဥပမာအနေဖြင့်၊ ခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ စာသားအချို့ကို ဖန်သားပြင်ပေါ်သို့ ပြသပါစို့-

button.addEventListener('click', function() {
	console.log('!!!');
});

ခလုတ် 3 ခု ရှိသည်-

<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">

ပထမခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ ဖန်သားပြင်ပေါ်တွင် နံပါတ် 1 ပေါ်လာစေရန်၊ ဒုတိယခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ နံပါတ် 2 ပေါ်လာစေရန်၊ တတိယခလုတ်ကို ကလစ်နှိပ်လိုက်သောအခါ နံပါတ် 3 ပေါ်လာစေရန် ပြုလုပ်ပါ။