JavaScript တွင် loop အတွင်း event handler များကို ဖြုတ်ခြင်း

ယခု အစုတစ်ခုတည်းမဟုတ်ဘဲ များစွာသော element များရှိသည်ဆိုပါစို့။ ဥပမာအားဖြင့်၊ များစွာသော အတ္ထုပ္ပတ္တိများ-

<p>text1</p>
<p>text2</p>
<p>text3</p>

ဤအတ္ထုပ္ပတ္တိများအားလုံးတွင် ကလစ်တစ်ချက် event handler အဖြစ် func function ကို ချိတ်ဆက်ကြပါစို့။

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
}

ယခု code ကို ပြန်ပြင်ဆင်ပြီး အတ္ထုပ္ပတ္တိတစ်ခုစီသည် ၎င်းကို ပထမဆုံးအကြိမ်နှိပ်လိုက်သည့်အခါတွင်သာ တုံ့ပြန်အောင်လုပ်ကြပါစို့။ အတ္ထုပ္ပတ္တိတစ်ခုကို နှိပ်လိုက်သောအခါတွင် ထိုအတ္ထုပ္ပတ္တိမှ ချိတ်ထားသော handler ကို ဖြုတ်ပါမည်။ ဤနည်းဖြင့် ဖြုတ်ခြင်းသည် ထိုအတ္ထုပ္ပတ္တိမှသာ ဖြစ်ပြီး ကျန်အတ္ထုပ္ပတ္တိများကို ထိခိုက်ခြင်းမရှိပါ။

သင်သိပြီးဖြစ်သည့်အတိုင်း၊ event ဖြစ်ပွားသော element ကို function-handler အတွင်း this မှတစ်ဆင့် ရယူနိုင်ပါသည်။ ဆိုလိုသည်မှာ this မှ handler ကိုဖြုတ်ရန် လိုအပ်သည်၊ ဤသို့ဖြစ်သည်-

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

function func() {
	console.log(this.textContent);
	this.removeEventListener('click', func); // handler ကိုဖြုတ်ပါ
}

အတ္ထုပ္ပတ္တိများကိုပေးထားသည်။ အတ္ထုပ္ပတ္တိများအနက် တစ်ခုခုကို နှိပ်လိုက်သောအခါ ၎င်း၏အဆုံးတွင် အာမေဋိတ်လက္ခဏာ (!) ထည့်ပေးပါ။ �ထပ်ထည့်မှုသည် ပထမဆုံးအကြိမ်နှိပ်သည့်အခါတွင်သာ ဖြစ်ပေါ်အောင်လုပ်ပါ။