1
00:00:04,660 --> 00:00:08,560
Let's get started with dumb event.

2
00:00:08,800 --> 00:00:12,610
Now, I believe you know where we are heading towards.

3
00:00:12,820 --> 00:00:17,440
First we learned how we can examine the dome.

4
00:00:17,890 --> 00:00:26,170
And after that, we also learned how we can select the individual node or the element.

5
00:00:26,410 --> 00:00:34,360
And after selecting, we were able to change some styles and properties of that particular element.

6
00:00:34,360 --> 00:00:39,850
And also we can hide or add content to the dome.

7
00:00:40,210 --> 00:00:43,720
So why do we need Dome event?

8
00:00:44,050 --> 00:00:52,720
Well, let's take it that we want a user to take an action in our website, for example, using the

9
00:00:52,720 --> 00:00:53,350
mouse.

10
00:00:53,680 --> 00:01:04,930
So events simply means that any action that is being taken by a user, whether using the mouse or keyboard.

11
00:01:04,959 --> 00:01:09,640
So this is what we are going to talk about called dome event.

12
00:01:09,760 --> 00:01:15,010
So events makes our application more dynamic and interactive.

13
00:01:15,310 --> 00:01:20,890
So let's get started and see how many types of events do we have.

14
00:01:20,920 --> 00:01:21,550
All right.

15
00:01:21,550 --> 00:01:23,260
So let's get started.

16
00:01:23,590 --> 00:01:30,610
Well, the first dome event that we will talk about is called the mouse event.

17
00:01:30,760 --> 00:01:41,380
So mouse event are event taking by using the mouse, whether by right clicking or scrolling is what

18
00:01:41,380 --> 00:01:43,300
we call event.

19
00:01:43,840 --> 00:01:51,340
We will take this particular event type and dive in more talking about types of event when it comes

20
00:01:51,340 --> 00:01:53,620
to the mouse event.

21
00:01:53,860 --> 00:02:01,960
And apart from using our mouse to do any action or to take any action, we also have another event called

22
00:02:01,960 --> 00:02:03,580
Keyboard Event.

23
00:02:03,730 --> 00:02:06,580
So event assistivetouch with keyboard.

24
00:02:06,580 --> 00:02:12,670
For example, when pressing your keyboard or when you are releasing your hand or fingers from a keyboard,

25
00:02:12,670 --> 00:02:16,240
there are some actions or events that can be triggered.

26
00:02:16,270 --> 00:02:25,150
So apart from the keyboard event, we also have what is called for event example is when we start typing

27
00:02:25,150 --> 00:02:29,150
or filling a form, there are some events that we can trigger.

28
00:02:29,170 --> 00:02:36,940
So by the end of this section, we are going to build this couple of projects to demonstrate the types

29
00:02:36,940 --> 00:02:37,930
of events.

30
00:02:38,200 --> 00:02:43,840
The first event that we will talk about, the next video is called the Mouse Event.

31
00:02:43,990 --> 00:02:48,910
You can see that these are examples of events that we will talk about.

32
00:02:48,940 --> 00:02:51,550
So the first one is that mouse live.

33
00:02:51,820 --> 00:02:59,010
So when I move my mouse on the button and then I leave my mouse if to say that event has been triggered

34
00:02:59,020 --> 00:03:02,550
and it says that you left the element perfect.

35
00:03:02,560 --> 00:03:07,960
So this is what you call mouse live, event mouse live and mouse out.

36
00:03:07,960 --> 00:03:10,540
They have something in but don't worry with having be more.

37
00:03:10,570 --> 00:03:12,130
Likewise mouse over.

38
00:03:12,160 --> 00:03:18,250
As soon as I move my mouse on this pattern, see that I have an event triggered that you are on the

39
00:03:18,250 --> 00:03:21,730
element and then when I move my mouse entered.

40
00:03:21,730 --> 00:03:24,220
Yes, you have entered into the element.

41
00:03:24,280 --> 00:03:30,850
When I move to this particular button and then I move up, the event will be triggered and this one

42
00:03:30,850 --> 00:03:33,240
to mouse click when I click on it.

43
00:03:33,250 --> 00:03:36,070
Some events will occur when I double click event.

44
00:03:36,070 --> 00:03:41,220
Okay, when I, when I start to scroll my will you see that event has been triggered.

45
00:03:41,230 --> 00:03:44,820
So these are examples of mouse event.

46
00:03:44,830 --> 00:03:50,800
And apart from that we are going to use the knowledge we go to build this beautiful application called

47
00:03:50,800 --> 00:03:53,740
background color changer using the mouse.

48
00:03:53,740 --> 00:03:58,750
So anywhere I move my cursor, you see that the background color changes.

49
00:03:58,750 --> 00:04:05,220
If I come here, the color changes and like that you see how cool it is.

50
00:04:05,230 --> 00:04:09,760
So with this event, we can do many things, all right?

51
00:04:09,760 --> 00:04:16,180
And apart from the background change application that are going to be able to explore the types of event,

52
00:04:16,209 --> 00:04:20,110
we also have this application called a mouse move.

53
00:04:20,470 --> 00:04:26,950
Whenever I move or wherever I move or position, my mom see that it gives me the position in the x and

54
00:04:26,950 --> 00:04:27,820
y axis.

55
00:04:27,830 --> 00:04:32,110
You see that when I come here, you see the position of my mouse or my kids are here.

56
00:04:32,150 --> 00:04:33,340
Likewise, this part.

57
00:04:33,340 --> 00:04:37,300
That is one cool thing we can do with this mouse event.

58
00:04:37,630 --> 00:04:41,130
And apart from that, you also talk about keyboard events.

59
00:04:41,140 --> 00:04:46,720
So when I refresh it like this one, it says that press Oh, sorry.

60
00:04:46,720 --> 00:04:48,160
When I refresh it, it is that.

61
00:04:48,160 --> 00:04:50,890
Press in a key on your keyboard.

62
00:04:50,920 --> 00:04:59,700
So when I press a it says that A you are pressing a key and indeed I'm pressing when I release my finger

63
00:04:59,710 --> 00:05:03,580
it says that you release the key and indeed I have released my key.

64
00:05:03,580 --> 00:05:03,880
I can.

65
00:05:03,990 --> 00:05:12,300
Hat care w e for any key and display the key I have press on my keyboard.

66
00:05:12,300 --> 00:05:13,530
That is awesome.

67
00:05:13,680 --> 00:05:21,450
And apart from the keyboard event, you talk about form events for example, for this particular form

68
00:05:22,260 --> 00:05:28,680
as you mean, I start typing here we see that a you are typing and I believe it will see this kind of

69
00:05:28,680 --> 00:05:31,110
features resemble a chat application.

70
00:05:31,110 --> 00:05:38,310
You can see that person is typing as soon as I move my mouse or my keys are from this form.

71
00:05:38,340 --> 00:05:42,510
We see that you have stopped typing and indeed I have stopped typing.

72
00:05:42,510 --> 00:05:45,840
I can type anything here like that, like that, like that.

73
00:05:45,840 --> 00:05:51,240
And then the events on this one, I click on it because they are going to submit when I click on reset

74
00:05:51,240 --> 00:05:53,730
to the form has been restated.

75
00:05:53,730 --> 00:05:56,760
That is the event in a nutshell.

76
00:05:56,790 --> 00:06:01,410
So in this video, let's start a with mouse event.