JavaScript JavaScript and the DOM Responding to User Interaction Listening for Events with addEventListener()

Shane Unger
Shane Unger
9,413 Points

For loop question

This is going to be difficult to ask, but I'll try my best. What exactly is happening here with the for loop? I understand that it is iterating across the collection of list items, and I am familiar with the general concept of array iteration, but I'm confused in this instance.

So we have a collection of zero-indexed html elements, the list items, and we're iterating over them in order to register the event handlers behavior. I move my mouse over the element at [3], which is plums i think, and it gets converted to uppercase on mouseover, and lowercase on mouseout. But how is iteration helping with this? Can someone walk me through step by step? The i variable starts at zero, then the conditional statement is true, and the code block executes, but since it starts at zero how does my mousemove over [3] immediately activate? Is the for loop constantly iterating at a million miles an hour over the whole list, and it's happening so fast that when I mouseover the last one it just so happens to catch it?

Thanks for your help!

2 Answers

andren
andren
28,418 Points

The iteration's only purpose is to add the event listener to the elements, that is all it does and it only runs once. The iteration is not responsible for highlighting the element when you mouse over the it.

When you highlight the element that triggers a mouseover event, and since you have added an event listener for that event to the element the code you specified will be triggered. But that has nothing to do with the loop, this project would work fine without a loop but then you would have to write the addEvent code multiple times since you would need to type it for each of the items. The loop is just used to cut down on repeated code.

That is also why the bug demonstrated at the end occurs, where removing an element from the list and adding a new one in breaks the highlighting for the new element. Since the for loop only runs once when the page loads the newly added element has no event listener attached to it.

Shane Unger
Shane Unger
9,413 Points

So the for loop runs once, and assigns the handler to the list items. Is that then stored in the browser's memory, so it says "hey, I have these list items and I know they all have this event handler that can be activated when they're moused over?"

andren
andren
28,418 Points

I'm not an expert on the underlying technical details, but yes the event listener is attached directly to the element and as far as I know the browser is the one keeping track of the event listeners and also the one actually triggering the events themselves.

Daniel Fitzhugh
Daniel Fitzhugh
9,470 Points

I opened all the questions to see if this question had been answered, and it has - great :)

And also the fact that the "for loop" is responsible for the new "<li>" not having the eventListener - very useful.