DOM элементдерин түзөтүү функциясын көбөйтүү катасы JavaScript

Келгиле, бизде бир катар тизме бар дейли:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

Тизмени жана анын пункттарын өзгөчө өзгөрмөлөргө алганга тийишпиз:

let ul    = document.querySelector('ul');
let lis   = document.querySelectorAll('li');

Биздин тизме пункттарын пайда боло турган инпут менен түзөтүүгө мүмкүн болсун:

for (let li of lis) {
	li.addEventListener('click', function func() {
		let input = document.createElement('input');
		input.value = li.textContent;
		
		li.textContent = '';
		li.append(input);
		
		input.addEventListener('blur', function() {
			li.textContent = this.value;
			li.addEventListener('click', func);
		});
		
		li.removeEventListener('click', func);
	});
}

Эми биз тизмеге жаңы пункттар кошууну каалайбыз дейли. Бул үчүн тизме астында тиешелүү инпут болсун:

<input id="adder">

Бул инпуттун шилтемесин өзгөрмөгө алалы:

let adder = document.querySelector('#adder');

Инпуттун фокустун жоготкондо, тизмеге инпуттан алынган текст менен жаңы пункт кошулсын:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	ul.append(li);
});

Эми биз жаңы кошулган пункттарды да түзөтүүгө болушун каалайбыз. Өзү үчүн түзөтүү иштей бербейт, анткени биз тизме пункттарына чыкылдатуу иштеткичин орноткондо, бул пункттар дагы болгон эмес.

Келгиле, бул көйгөйдү чечүүнүн мүмкүн варианттарын карап көрөлү.

Биринчи чечим

Эң жөнөкөй чечим - бул func функциясынын кодун көбөйтүү, аны жаңы түзүлгөн пункттар үчүн да байланыштыруу:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	li.addEventListener('click', function func() {
		// бул жерде биз кодду көбөйтөбүз
	});
	
	ul.append(li);
});

Албетте, бул чечимде биз дароо жетишсиздикти көрөбүз - кодду көбөйтүү туура эмес.

Экинчи чечим

Көбөйтүү көйгөйүн чечүү үчүн func функциясын сыртка чыгарып, аны Function Declaration кылуу логикалуу:

function func() {
	let input = document.createElement('input');
	input.value = li.textContent;
	
	li.textContent = '';
	li.append(input);
	
	input.addEventListener('blur', function() {
		li.textContent = this.value;
		li.addEventListener('click', func);
	});
	
	li.removeEventListener('click', func);
}

Мына ушул жерде бизди көйгөй күтүп турат. Иш мында, биздин функция тышкы көрүү аянтынан алынган li өзгөрмөсүн колдонгон. Бирок функцияны чыгаргандан кийин бул өзгөрмө эми көрүнбөй калды!

Көйгөйдү чечүү үчүн биздин li өзгөрмөбүздү параметр катары берели:

function func(li) {
	let input = document.createElement('input');
	input.value = li.textContent;
	
	li.textContent = '';
	li.append(input);
	
	input.addEventListener('blur', function() {
		li.textContent = this.value;
		li.addEventListener('click', func);
	});
	
	li.removeEventListener('click', func);
}

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

for (let li of lis) {
	li.addEventListener('click', func(li)); // иштей бербейт!
}

Бул көйгөйдү чечүү үчүн жөн гана анонимдик иштеткичтин ичинде биздин функциябызды чакыралы:

for (let li of lis) {
	li.addEventListener('click', function() {
		func(li);
	});
}

Жана жаңы тизме пунктун түзүүдө дагы ушил сыяктуу эле кылалы:

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	
	li.addEventListener('click', function() {
		func(li);
	});
	
	ul.append(li);
});

Үчүнчү чечим

Дагы тазараак чечим бар. Жөн гана делегацияны колдонсо болот. Бул учурда жаңы тизме пункттары менен болгон көйгөй жөн гана пайда болбой калат:

ul.addEventListener('click', function(event) {
	if (event.target.tagName === 'LI') { // li'ге чыкылдатууну кармайбыз, инпутка эмес
		let li = event.target;
		
		let input = document.createElement('input');
		input.value = li.textContent;
		
		li.textContent = '';
		li.append(input);
		
		input.addEventListener('blur', function() {
			li.textContent = this.value;
		});
	}
});

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

adder.addEventListener('blur', function() {
	let li = document.createElement('li');
	li.textContent = this.value;
	ul.append(li);
});