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-ებისთვის და ღილაკზე დაწკაპუნებისას. შემდეგ გაკვეთილში განვიხილავთ ამ შეურაცხმყოფელობისგან თავის დაღწევის გზას.