1
00:00:00,510 --> 00:00:05,580
Wouldn't it be nice if we could add more event listeners on this dynamically created element?

2
00:00:05,820 --> 00:00:08,880
Well, you're in luck because we can and I'm going to show you how.

3
00:00:09,180 --> 00:00:14,850
So taking that Divx object, the one that we just created in the last lesson, and because this is an

4
00:00:14,850 --> 00:00:20,640
active object, we can always add an event listener and we can do anything that we did when we selected

5
00:00:20,640 --> 00:00:23,390
the elements on the page and put it within an object format.

6
00:00:23,610 --> 00:00:25,350
So same idea, same concept.

7
00:00:25,350 --> 00:00:26,870
We can do the exact same stuff.

8
00:00:27,090 --> 00:00:33,540
So adding in mouse enter and whenever we enter the object, we can do some run a block of code.

9
00:00:33,720 --> 00:00:35,850
And for this case we're not going to do a whole lot.

10
00:00:35,860 --> 00:00:37,560
We're taking that div object.

11
00:00:37,800 --> 00:00:43,980
And if we were doing this function outside of this main container, because we've got that active div

12
00:00:43,980 --> 00:00:51,840
object and we know what javascript that we can reference the parents values object values so we can

13
00:00:51,840 --> 00:00:54,260
always get those variables into the children.

14
00:00:54,480 --> 00:00:57,560
So that's where we can use div and we can also use this.

15
00:00:57,570 --> 00:01:01,020
It's going to have the same, it's going to refer to the same element and object.

16
00:01:01,320 --> 00:01:05,000
We can update the background color and set that to read.

17
00:01:05,340 --> 00:01:07,080
So now what's going to happen?

18
00:01:07,080 --> 00:01:09,660
Whenever I hover over it, it's going to go read.

19
00:01:09,960 --> 00:01:15,570
Let's add in a few more because that was fun, of course, and we can add in mouse leave.

20
00:01:15,570 --> 00:01:20,700
So whenever we leave it, we're going to reset it back to its temp color.

21
00:01:20,910 --> 00:01:23,280
So we have this randomly generated color.

22
00:01:23,610 --> 00:01:28,140
And let's do one more, because, of course, that was a whole lot of fun.

23
00:01:28,560 --> 00:01:31,710
So let's do one where we've got the ability to click it.

24
00:01:32,160 --> 00:01:36,570
And if it gets clicked, then let's generate a brand new temp color.

25
00:01:36,600 --> 00:01:37,380
Why not write?

26
00:01:37,680 --> 00:01:43,230
So instead of updating the background color, we're going to generate a brand new temp color and then

27
00:01:43,230 --> 00:01:44,820
we'll update the background color.

28
00:01:45,510 --> 00:01:48,300
And then this is going to be the persistent background color.

29
00:01:48,300 --> 00:01:51,570
So it's always going to go back to that new temp value.

30
00:01:51,810 --> 00:01:54,450
So this is one way where you can update that element.

31
00:01:54,450 --> 00:02:00,180
Object information and temp color was just a variable that we created within the object, just like

32
00:02:00,180 --> 00:02:05,520
X and Y, and we're utilizing that within the code because it's contained within that element object.

33
00:02:05,700 --> 00:02:10,110
So now that was a lot of fun and we need to make this game a little bit harder.

34
00:02:10,110 --> 00:02:15,180
So we need to have this element moving around and that's going to be introduced in the next lesson.

35
00:02:15,450 --> 00:02:21,120
So go ahead and add in your event listeners on that dynamically created element you can do math center,

36
00:02:21,130 --> 00:02:22,440
Mousley click.

37
00:02:22,440 --> 00:02:26,090
Any event, listeners that you want, you can use the same ones that I've used.

38
00:02:26,220 --> 00:02:27,150
Have some fun with it.

39
00:02:27,300 --> 00:02:31,080
Build that into your project and you can be ready to move on to the next step.

40
00:02:31,260 --> 00:02:34,050
We're going to animate this and that's going to be really cool.