JavaScript-те жаңа элементтерге оқиға өңдеушілерін бекіту

Бізде ul тізімі және батырма болсын:

html<ul>
  <li>элемент</li>
  <li>элемент</li>
  <li>элемент</li>
  <li>элемент</li>
  <li>элемент</li>
</ul>

<button>қосу</button>

Элементтерді сәйкес айнымалыларға алайық:

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

Кез келген li-ге шерту кезінде соңына леп белгісі қосылатындай етейік:

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

Енді батырманы басу кезінде тізімнің соңына жаңа li қосылатындай етейік:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'элемент';
  list.appendChild(item);
});

Алайда, біз мәселеге тап боламыз: жаңа қосылған li-ге шерту леп белгісінің соңына қосылуға әкелмейді. Себебі, біз бастапқыда бар болған li-лерге ғана шерту өңдеушісін қосамыз, бірақ жаңаларына емес.

Мәселені жаңа li-ге шерту өңдеушісін бекіту арқылы шешейік:

javascriptbutton.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'элемент';
  
  item.addEventListener('click', function() { // шерту өңдеушісі
    this.textContent = this.textContent + '!';
  });
  
  list.appendChild(item);
});

Алайда, енді функция-өңдеушінің коды екі жерде қайталанады - бастапқыда бар болған li-лер үшін және жаңалары үшін. Мұны оны бөлек функцияға шығару арқылы түзейік:

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

Кодтың қайталануын болдырмау үшін біздің функциямызды қолданайық:

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

button.addEventListener('click', function() {
  let item = document.createElement('li');
  item.textContent = 'элемент';
  
  item.addEventListener('click', handler);
  
  list.appendChild(item);
});

Мәселе жалпы алғанда шешілді және біз функция-өңдеушінің кодын қайталаудан құтылдық. Алайда, оқиға өңдеушілерін бекіту әлі де екі жерде тура келеді: бар болған li-лер үшін циклде де, батырмаға шерту кезінде де. Келесі сабақта біз бұл ыңғайсыздықтан құтылу тәсілін қарастырамыз.