You might also get a question like this, implement a click on to the item as fast as possible and as
you can see here inside indexes Timo, we have such markup.
So we have a you have a list and inside with just heavenly elements.
So typically, you can solve it differently.
And here we have two typical solutions, but one is much better than another.
So actually what we can do here, we can find items with document and here we're using quite a select
to all.
And here, as you can see, you know, indexes HTML, we're heavily riskless item.
So here I can find by class our item and here where I get in a list of our items.
After this, we can loop through this list of dominos.
And for every single element, we can attach a listener.
So here we can write items dot for each.
Here we have our item, which is a Donald.
And inside we can write Item Dot, Edu and listener.
Here we have our click event.
And here is our handle.
So what we want to do when we're clicking on the item at least tried some text regarding our item.
And actually inside we have just a value of this is where we can right here.
You clicked on item.
And here we can just write plus item dot in a text.
So first of all, we found the list of all items and then for every single item in the loop, we added
event listener.
Let's check the time to load in the page.
We see our list of items now.
We're clicking on one item and we're getting a nice console.
Look with the content of this item.
We're clicking on another and we're getting console.log.
And actually, it is working and it is all fine, but we have a task to build it as fast as possible.
And actually here.
The problem is, if we have a super huge list, then it's not performant enough because actually here
we have four each for all our items, which means that we have here.
A list of 1000 items were added in here, 1000 listeners.
And this is super bad for our performance.
This is why this is not the best solution for our task.
What we can do we can find the parent off our list and as you can see here, we have the URL with glass
to the app.
This is way here.
Let's find an element and we can use here document query selector and we know that the class is our
To-Do app.
Now inside, we can attach just a single listener for our app element.
So App Advent listener, here we have our click.
And here is our listener and then right in here event.
So we have access to our event and actually what we want to do inside.
We want to check what element we are targeting because we can click here on our container or we can
click on any item inside.
And actually, we're interested on the clicking on the item.
This is why here we can vote, OK, if we have here event Typekit, which means we clicked and we want
to check if our event target has a class of the item.
Then this means that we hated our leap.
This is why here we can.
The event Typekit Dot G+ list and here contains so actually class list property inside the node has
a function contains to check if we have such class.
In our case, we're checking if we clicked on our item.
If this is done, then we can copy our console, look here inside and just change it a little bit.
So we're living here.
I was three and you clicked on item and here instead of Item Dot in a text, we can write Event Dot
Daljit Dot in a text and it will work exactly the same.
Let's check the SA time to load in the page.
I'm hitting here on some items and we're getting nice.
You clicked and actually, if we will click somewhere outside, it doesn't do anything.
But the main difference is this code is much faster because we have here just a single listener for
our parent, and we're not generating hundreds or thousands of listeners for every single item.