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.