Прикачане на обработвачи в цикъл на JavaScript

В предишния урок се научихме да създаваме нови елементи в цикъл. Нека сега прикачваме обработвачи на събития при създаване на нови елементи.

Нека отново имаме такъв родителски div:

<div id="parent"></div>

Нека стартираме цикъл, който ще добави в края на нашия div 9 нови параграфа, като прикачи към тях обработвач на кликване:

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

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = '!';
	
	// Прикачаме обработвач на кликване:
	p.addEventListener('click', function() {
		console.log(this.textContent);
	});
	
	parent.appendChild(p);
}

Даден е div. Стартирайте цикъл, който ще добави в нашия div 5 input полета. Нека да има и параграф. Направете така, че всяко от новите input полета при загуба на фокус да записва своя текст в параграфа.