Wouldn't it be nice if we could add more event listeners on this dynamically created element?
Well, you're in luck because we can and I'm going to show you how.
So taking that Divx object, the one that we just created in the last lesson, and because this is an
active object, we can always add an event listener and we can do anything that we did when we selected
the elements on the page and put it within an object format.
So same idea, same concept.
We can do the exact same stuff.
So adding in mouse enter and whenever we enter the object, we can do some run a block of code.
And for this case we're not going to do a whole lot.
We're taking that div object.
And if we were doing this function outside of this main container, because we've got that active div
object and we know what javascript that we can reference the parents values object values so we can
always get those variables into the children.
So that's where we can use div and we can also use this.
It's going to have the same, it's going to refer to the same element and object.
We can update the background color and set that to read.
So now what's going to happen?
Whenever I hover over it, it's going to go read.
Let's add in a few more because that was fun, of course, and we can add in mouse leave.
So whenever we leave it, we're going to reset it back to its temp color.
So we have this randomly generated color.
And let's do one more, because, of course, that was a whole lot of fun.
So let's do one where we've got the ability to click it.
And if it gets clicked, then let's generate a brand new temp color.
Why not write?
So instead of updating the background color, we're going to generate a brand new temp color and then
we'll update the background color.
And then this is going to be the persistent background color.
So it's always going to go back to that new temp value.
So this is one way where you can update that element.
Object information and temp color was just a variable that we created within the object, just like
X and Y, and we're utilizing that within the code because it's contained within that element object.
So now that was a lot of fun and we need to make this game a little bit harder.
So we need to have this element moving around and that's going to be introduced in the next lesson.
So go ahead and add in your event listeners on that dynamically created element you can do math center,
Mousley click.
Any event, listeners that you want, you can use the same ones that I've used.
Have some fun with it.
Build that into your project and you can be ready to move on to the next step.
We're going to animate this and that's going to be really cool.