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

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

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

html<ul></ul>

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

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

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

javascriptfor (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 တဂ်တွင် ဖြစ်ရပ်ကို ကိုင်တွယ်သည့် ကိရိယာ တစ်ခုသာ တပ်ဆင်နိုင်ပြီး အာဏာအပ်နှင်းခြင်း ကို အသုံးပြုနိုင်ပါသည်။

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

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

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

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