JavaScriptте жаңы элементтерге ишкерлерди коюу

Бизде ul тизмеси жана баскыч бар дейли:

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

<button>кошуу</button>

Элементтерди тиешелүү өзгөрмөлөргө алалы:

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

Ар бир li боюнча чыкылдатуунун натыйжасында анын аягына үндөү белги кошулсун:

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

Эми баскычты басуу менен тизменин аягына жаңы li кошулсун:

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

Бирок, биз маселеге туш болобуз: жаңы кошулган li боюнча чыкылдатуу анын аягына үндөү белги кошпойт. Себеби, биз башында бар болгон li элементтерине гана чыкылдатуу ишкерчин кошобуз, бирок жаңыларына эмес.

Маселени жаңы li үчүн чыкылдатуу ишкерчин кошуп чечебиз:

button.addEventListener('click', function() {
	let item = document.createElement('li');
	item.textContent = 'элемент';
	
	item.addEventListener('click', function() { // чыкылдатуу ишкерчи
		this.textContent = this.textContent + '!';
	});
	
	list.appendChild(item);
});

Бирок, азыр ишкерчи-функциянын коду эки жерде кайталанып турат - башында бар болгон li үчүн жана жаңылар үчүн. Муну аны жеке функцияга чыгарып чечебиз:

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

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

for (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 үчүн циклде жана баскычка чыкылдатууда. Кийинки сабакта бул ыңгайсыздыктан кантип кутулууну карайбыз.