Event delegation in JavaScript

In the previous lesson, the problem that occurs when adding new elements was described and its solution was given. In this lesson, we will look at a better way to get around the problem - event delegation. Let's analyze it.

As you already know, by clicking on li, we are simultaneously clicking on ul. This is possible due to event bubbling. We can use this to solve our problem: we will hang an event not on each li, but on their parent ul:

list.addEventListener('click', function() {
	
});

Now in the event handler, this will point to the element to which the handler is attached, and event.target will point to the element in which the event happened:

list.addEventListener('click', function(event) {
	console.log(this);         // our list
	console.log(event.target); // our list item
});

Let's make it so that an exclamation mark is added to the end of the li, on which the click happened:

list.addEventListener('click', function(event) {
	event.target.textContent = event.target.textContent + '!';
});

Repeat the above solution. Make sure the new li will also respond to the click.