Kuweka Vichakataji kwa Vipengele Vipya katika JavaScript

Tuchukulie tuna orodha ul na kifungo:

html<ul>
  <li>kipengee</li>
  <li>kipengee</li>
  <li>kipengee</li>
  <li>kipengee</li>
  <li>kipengee</li>
</ul>

<button>ongeza</button>

Tupate vipengele vyetu katika anuwai zinazofanana:

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

Tufanye ili kwa kubofya kwa li yoyote alama ya mshangao iongezwe mwishoni:

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

Wacha sasa tufanye ili kwa kubonyeza kifungo li mpya iongezwe mwisho wa orodha:

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

Hata hivyo, tutapata tatizo: kubofya li mpya iliyoongezwa hataisababisha kuongezwa kwa alama ya mshangao mwishoni. Jambo ni kwamba tunaongeza kichakataji cha kubofya kwa li zile zilizokuwapo awali, lakini sio kwa mpya.

Turekebishe tatizo kwa kuweka kichakataji cha kubofya kwa li mpya:

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

Hata hivyo, sasa msimbo wa kitendakazi-kichakataji unarudiwa katika maeneo mawili - kwa li zilizokuwapo awali na kwa mpya. Turekebishe hili kwa kuitenga katika kitendakazi tofauti:

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

Tutumie kitendakazi chetu, ili kuepuka kurudia msimbo:

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

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

Kazi kwa ujumla imetatuliwa na tumeepuka kurudia msimbo wa kitendakazi-kichakataji. Hata hivyo, kuweka vichakataji wa matukio bado inatubidi katika maeneo mawili: katika kitanzi kwa li zilizopo, na wakati wa kubofya kifungo. Katika somo linalofuata tutachambua njia ya kuondoa usumbufu huu.