JavaScript တွင် element အသစ်များပေါ်သို့ event handler များတပ်ဆင်ခြင်း

ကျွန်ုပ်တို့ဆီတွင် list ul နှင့် button တစ်ခုရှိသည်ဆိုကြပါစို့။

html<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

<button>add</button>

ကျွန်ုပ်တို့၏ element များကို သက်ဆိုင်ရာ variable များထဲသို့ ရယူကြမည်။

javascriptlet button = document.querySelector('button');
let list   = document.querySelector('ul');
let items  = list.querySelectorAll('li');

မည်သည့် li ပေါ်တွင်မဆို click နှိပ်လိုက်သည့်အခါ ၎င်း၏အဆုံးတွင် အာမေဍိတ်အမှတ်အသား ပေါင်းထည့်ပေးမည့် ပုံစံပြုလုပ်ကြပါစို့။

javascriptfor (let item of items) {
  item.addEventListener('click', function() {
    this.textContent = this.textContent + '!';
  });
}

ယခု button ကိုနှိပ်လိုက်သည့်အခါ list ၏အဆုံးတွင် li အသစ်တစ်ခု ပေါင်းထည့်ပေးမည့် ပုံစံပြုလုပ်ကြပါစို့။

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'item';
  list.appendChild(item);
});

သို့သော် ကျွန်ုပ်တို့သည် ပြဿနာတစ်ခုနှင့် ကြုံရလိမ့်မည်။ ပေါင်းထည့်လိုက်သော li အသစ်ပေါ်တွင် click နှိပ်လိုက်ခြင်းသည် အဆုံးတွင် အာမေဍိတ်အမှတ်အသား ပေါင်းထည့်ခြင်းကို ဖြစ်ပေါ်စေမည် မဟုတ်ပါ။ အကြောင်းမှာ ကျွန်ုပ်တို့သည် click event handler ကို ကနဦးကတည်းကရှိပြီးသော li များပေါ်တွင်သာ တပ်ဆင်ထားပြီး အသစ်များပေါ်တွင် မတပ်ဆင်ထားသောကြောင့် ဖြစ်သည်။

li အသစ်ပေါ်သို့ click event handler တပ်ဆင်ပေးခြင်းဖြင့် ပြဿနာကို ပြင်ဆင်ကြပါမည်။

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'item';
  
  item.addEventListener('click', function() { // click event handler
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

သို့သော် ယခုအခါ function handler ၏ code သည် နေရာနှစ်ခုတွင် ထပ်နေသည် - ကနဦးကတည်းကရှိပြီးသော li များအတွက်နှင့် အသစ်များအတွက်။ ၎င်းကို function သီးသန့်တစ်ခုထုတ်၍ ပြင်ဆင်ကြမည်။

javascriptfunction handler() {
  this.textContent = this.textContent + '!';
}

ကုဒ်ထပ်နေခြင်းကို ရှောင်ရှားရန် ကျွန်ုပ်တို့၏ function ကို အသုံးပြုကြမည်။

javascriptfor (let item of items) {
  item.addEventListener('click', handler);
}

button.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'item';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

ပြဿနာကို ယျေဘုယျအားဖြင့် ဖြေရှင်းပြီးဖြစ်ကာ function handler ၏ကုဒ် ထပ်နေခြင်းကိုလည်း ရှောင်ရှားပြီးဖြစ်သည်။ သို့သော် event handler များကို တပ်ဆင်ရခြင်းသည် နေရာနှစ်ခုတွင် ဆက်လက်ဖြစ်ပေါ်နေဆဲဖြစ်သည်။ ရှိပြီးသော li များအတွက် loop ထဲတွင်လည်းကောင်း၊ button ကိုနှိပ်သည့်အခါတွင်လည်းကောင်း။ နောက်လာမည့်သင်ခန်းစာတွင် ဤအဆင်မပြေမှုမှ လွတ်မြောက်ရန် နည်းလမ်းတစ်ခုကို ဖြေရှင်းကြမည်။