JavaScript ရှိ ဖြစ်ရပ်များကို ကိုင်တွယ်ခြင်း အားကောင်းအောင် ပြုလုပ်ခြင်း

အစိတ်အပိုင်းများတွင် တပ်ဆင်ထားသော ဖြစ်ရပ်များကို ကိုင်တွယ်သည့် ကိရိယာများ အလွန်အမင်း များပြားခြင်းသည် မှတ်ဉာဏ်ပမာဏကို များစွာ အသုံးပြုပြီး စာမျက်နှာကို နှေးကွေးစေသည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် စာရင်းတစ်ခုရှိသည်ဆိုပါစို့။

<ul></ul>

ဤစာရင်းအား ကိုယ်စားပြုသည့် လင့်ခ်ကို ပြောင်းလဲနိုင်သော ကိန်းရှင်ထဲသို့ ရယူကြပါမည်။

let ul = document.querySelector('ul');

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

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

ရလဒ်အနေဖြင့် ကျွန်ုပ်တို့တွင် 1000 ဖြစ်ရပ်များကို ကိုင်တွယ်သည့် ကိရိယာများ ရှိနေပါသည်။ ဤသည် အလွန်များပြားလှပါသည်။ အားကောင်းအောင် ပြုလုပ်ရန်အတွက် ကျွန်ုပ်တို့သည် ul တဂ်တွင် ဖြစ်ရပ်ကို ကိုင်တွယ်သည့် ကိရိယာ တစ်ခုသာ တပ်ဆင်နိုင်ပြီး အာဏာအပ်နှင်းခြင်း ကို အသုံးပြုနိုင်ပါသည်။

ဤသို့ပြုလုပ်ကြပါစို့။ ပထမဦးစွာ စာရင်း၏ အမှတ်များကို ဖန်တီးကြပါမည်။

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

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

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

HTML ဇယားကွက်အရွယ် 100 မှ 100 အထိ ဖန်တီးပါ။ တစ်ခုချင်းစီသော ဆဲလ်များကို ကလစ်နှိပ်လိုက်သည်နှင့် အနီရောင်သို့ ပြောင်းလဲသွားစေရန် ပြုလုပ်ပါ။