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

Nour El-din El-helw
Nour El-din El-helw
8,228 Points

Last 10 seconds in the video

I didn't really get the last 10 seconds in the video. Can someone explain it to me?

1 Answer

Aakash Srivastava
Aakash Srivastava
5,412 Points

Hey Nour El-din El-helw , what he is saying is :
In the previous videos , you must have saw that , he has added behavious to each of the <li> elements present ( i,e before removing any list item by clicking remove key) there.
Now , when you remove an element add a new <li> element , that <li> element will not have any behavior attached to it because we have not done so . We've added behavior only to those that were present there i,e before deleting.
Here is the example :
Before deleting any element . Here , event listener has been attached to all of the <li>

<ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>          <!-- This is old element with behavior attached to it -->
 </ul>
}

Now , what he did was remove the last element i,e plums:

<ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
 </ul>

Now , he add the plums element back .

<ul>
        <li>grapes</li>
        <li>amethyst</li>
        <li>lavender</li>
        <li>plums</li>           <!-- This is new element with no behavior attached to it-->
 </ul>

Notice , the behavior was attached to old element not new element . . It will be treated a new element and hence it will not have any behavior attached to it.
Going one step further , this is happening because , behavior is getting added after the element is created . This will attach the behavior to the present element only . Once , the element gets deleted , the behavior will not be present in new elements.

But , if you can add the behavior at the time of creating the element then any new element will also have the behavior attached to it.
That's what Guil will do in next video . Hope it helps :)

Nour El-din El-helw
Nour El-din El-helw
8,228 Points

Awesome explanation! Thanks a lot. :D