1
00:00:00,720 --> 00:00:03,900
Hello and welcome to this Jake Query.

2
00:00:03,950 --> 00:00:14,180
Let's show on event handlers event handlers are use to respond to events on a website.

3
00:00:14,310 --> 00:00:24,180
Events on the other hand are visitors actions on a web page saw things like move in a mouse or via an

4
00:00:24,240 --> 00:00:26,710
element is known as an event.

5
00:00:27,040 --> 00:00:30,590
Selecting a button is known as an event.

6
00:00:30,720 --> 00:00:38,910
Clicking on a search bar that is an event moving your mouse over an element or more your mouse out of

7
00:00:38,910 --> 00:00:41,690
an element is known as an event.

8
00:00:41,840 --> 00:00:47,260
And there are event handlers that are used to respond to that event.

9
00:00:47,790 --> 00:00:51,770
This is the anime Web website home page.

10
00:00:51,870 --> 00:00:55,640
I am currently interacting with a website.

11
00:00:55,920 --> 00:01:05,820
So if I click on this little button here that is and event is a click event and the response to that

12
00:01:06,660 --> 00:01:10,170
is handled by an event handler.

13
00:01:10,170 --> 00:01:10,710
So fact.

14
00:01:10,730 --> 00:01:11,330
Quick.

15
00:01:13,020 --> 00:01:14,470
See what happens.

16
00:01:14,520 --> 00:01:21,780
It displays this speech and there is a function under that click which is known as an event handler

17
00:01:22,110 --> 00:01:25,880
that triggers this p been displayed.

18
00:01:25,880 --> 00:01:29,250
Again if I click on this log in button here.

19
00:01:29,730 --> 00:01:31,470
That is an event.

20
00:01:31,600 --> 00:01:32,040
See.

21
00:01:32,070 --> 00:01:40,470
Click event and the corresponding action is controlled by event and see if I click on the log In the

22
00:01:40,470 --> 00:01:45,180
event handler listens for that click and displays this.

23
00:01:45,300 --> 00:01:53,530
This log in details so the event handler I use to trigger an action in response to an event.

24
00:01:54,150 --> 00:02:02,200
I got my sample web page on the right here and got some code in my text editor on the left.

25
00:02:02,250 --> 00:02:09,780
I have created several event handlers to respond to actions on this Web page here.

26
00:02:09,810 --> 00:02:14,340
So let's have a look at the code to begin.

27
00:02:14,370 --> 00:02:20,320
I specified on line 6 the source which is a reference for d g.

28
00:02:20,330 --> 00:02:22,390
Query library VI.

29
00:02:22,410 --> 00:02:27,450
A content delivery network so there has to be specified first.

30
00:02:27,600 --> 00:02:36,330
Then on line it that's my script tag that enclose this piece of code that will respond to the event

31
00:02:36,680 --> 00:02:38,890
and event handlers on this page.

32
00:02:39,090 --> 00:02:45,190
So that's the beginning script code and that's the end of the script tag there.

33
00:02:45,300 --> 00:02:52,360
So this line here Line 9 does says documents ready.

34
00:02:52,430 --> 00:02:57,300
This Select Tool here is the document and they've got the dot ready.

35
00:02:57,310 --> 00:03:06,530
From what they document don't read the event handler does it listens out for the web page.

36
00:03:06,700 --> 00:03:15,090
Make sure that the web page page as fully loaded and as ready to be manipulated before he allows the

37
00:03:15,090 --> 00:03:18,780
code or corresponding code to execute.

38
00:03:18,780 --> 00:03:26,910
So he holds back the code from executing until the page or website as loaded.

39
00:03:27,120 --> 00:03:33,200
In this line here line 11 I've defined is select top select.

40
00:03:33,210 --> 00:03:42,190
Here is the div which is box here and the div here was defined in the hastier male part of the body.

41
00:03:42,450 --> 00:03:46,310
So this is a diff here giving it a D or D.

42
00:03:46,650 --> 00:03:52,130
And I've got some text here which is if you can see there so that it did define it.

43
00:03:52,130 --> 00:03:59,820
This is the success I have applied to the div to give it with a height margin and have added some other

44
00:03:59,820 --> 00:04:05,400
properties collar and so on to make it look presentable.

45
00:04:06,180 --> 00:04:10,730
And I have attached such an event handler.

46
00:04:10,890 --> 00:04:13,960
So we got to start with a first event handler.

47
00:04:14,250 --> 00:04:16,810
So in between we read perreault.

48
00:04:16,830 --> 00:04:25,370
This is I have stashed in whole the whole event and today's Deve.

49
00:04:25,620 --> 00:04:32,100
What that means is that I wanted to listen out for any or all right when you put your miles of something

50
00:04:32,100 --> 00:04:33,510
in a mole without.

51
00:04:33,630 --> 00:04:42,780
I have told you to listen out for Amy or that event and respond the response I've told it to give is

52
00:04:42,840 --> 00:04:49,670
indicated in these two functions between the parenthesis the red parenthesised the first response I've

53
00:04:49,670 --> 00:04:51,700
said it should do this.

54
00:04:51,970 --> 00:05:01,470
I have attached a dotsie a sense function to this select all this solotaroff refers to the current element

55
00:05:01,530 --> 00:05:02,500
being worked on.

56
00:05:02,510 --> 00:05:04,680
Which is the diff in this case.

57
00:05:04,830 --> 00:05:09,340
So this select was referring to this is a tad doxey as this.

58
00:05:09,390 --> 00:05:13,510
I have attached a dot Sears function to this cell.

59
00:05:13,830 --> 00:05:17,270
What that will do when the mouse enters the box.

60
00:05:17,310 --> 00:05:25,320
It would change the background column to read so as enter is change to read and then I've defined another

61
00:05:25,320 --> 00:05:32,610
function here that when the mouse leaves or when the whole rise out of the box turned to column blue

62
00:05:33,210 --> 00:05:36,930
so this is easy and this is out to the front.

63
00:05:36,940 --> 00:05:38,400
The BP in the baron.

64
00:05:38,400 --> 00:05:45,240
This is I have defined two functions one when the mouse enters one when the mouse leaves.

65
00:05:45,240 --> 00:05:52,510
So that is the response to a whole VAT effect all by basically when it mask enters when the master key.

66
00:05:52,740 --> 00:05:56,030
So let me put this.

67
00:05:56,070 --> 00:05:57,750
This is the original collar.

68
00:05:58,020 --> 00:06:00,330
Now defined in the scene sets.

69
00:06:00,360 --> 00:06:05,610
So you find that all mammals all vote it'll go rent mouse out.

70
00:06:05,760 --> 00:06:08,620
Blue is just what this function do.

71
00:06:08,670 --> 00:06:12,170
These two functions that I have defined between.

72
00:06:12,440 --> 00:06:19,230
Read parentheses in response to the dot over event handler.

73
00:06:19,760 --> 00:06:26,750
The next event handler I have attached to this as well this a double click.

74
00:06:26,770 --> 00:06:35,820
I have told it to listen out for any double click event and this is the response that told to give in

75
00:06:35,830 --> 00:06:37,870
between this.

76
00:06:37,870 --> 00:06:39,660
This is a function here.

77
00:06:39,700 --> 00:06:43,710
I've told you that if there is a double click on.

78
00:06:43,930 --> 00:06:46,650
This little refers to this deal here.

79
00:06:46,870 --> 00:06:53,110
So if there's any double click I want the colour of the div to go green.

80
00:06:53,290 --> 00:06:54,290
So let's check that out.

81
00:06:54,290 --> 00:06:56,740
So if I double click it will go green.

82
00:06:58,240 --> 00:06:58,680
See that.

83
00:06:58,680 --> 00:07:00,150
That it's a double click.

84
00:07:00,270 --> 00:07:01,380
And that has gone green.

85
00:07:01,380 --> 00:07:03,880
That's what I have defined here.

86
00:07:03,930 --> 00:07:09,180
So next I'm going to show you a click.

87
00:07:09,180 --> 00:07:15,700
So I've attached a click event handler to drive this same day.

88
00:07:16,110 --> 00:07:20,510
And this is what I've asked Steve to do define in this function here.

89
00:07:20,570 --> 00:07:25,560
I have attached a doc see SS function to it.

90
00:07:25,590 --> 00:07:29,280
This Selecter this alone refers to a diff.

91
00:07:29,460 --> 00:07:30,790
Been defined there.

92
00:07:30,900 --> 00:07:37,470
So what I'm saying is that when there is a click a little link click hunter that listens artfully click

93
00:07:37,560 --> 00:07:38,630
on this div.

94
00:07:39,000 --> 00:07:45,700
If there is a click I want the quality changed so purple use in the dots here says function.

95
00:07:45,720 --> 00:07:48,640
So I click once it's gone purple.

96
00:07:48,650 --> 00:08:00,060
All right ask what this function does the function is defined here in response to a click event the

97
00:08:00,140 --> 00:08:02,870
mouse enter the mouse leave.

98
00:08:02,940 --> 00:08:08,190
They work in combination with the hova effects or Miles any time.

99
00:08:08,190 --> 00:08:12,880
Basically when the mask enters a mouse leave is bisley when they must leave.

100
00:08:12,900 --> 00:08:16,250
So I've already defined that shone in the whole.

101
00:08:16,440 --> 00:08:21,280
So that will cover both of them must enter the mast leave.

102
00:08:21,600 --> 00:08:26,670
When you're writing your code don't forget your semicolons very important.

103
00:08:26,670 --> 00:08:30,490
If you miss the semicolon the code will not work properly.

104
00:08:30,720 --> 00:08:32,340
Cause he will know.

105
00:08:32,520 --> 00:08:36,810
The browser will not know where the code ended where that line of code ended.

106
00:08:36,810 --> 00:08:40,250
So semicolon indicates the end of the code line.

107
00:08:40,260 --> 00:08:48,990
Very important to indicate that and make sure all your braces match up your Param theses and they all

108
00:08:49,140 --> 00:08:53,110
match up as in this lecture.

109
00:08:53,310 --> 00:09:02,180
We covered what J query event handlers are events handlers are used to respond to events.

110
00:09:02,340 --> 00:09:06,830
Events are visitors actions on a Web site.

111
00:09:07,080 --> 00:09:11,450
So the first we went through was a document a ready event handler.

112
00:09:11,620 --> 00:09:20,520
What that does it checks to make sure the page or website is fully loaded and ready for manipulation

113
00:09:20,700 --> 00:09:27,600
before it allows the code to run or execute.

114
00:09:27,770 --> 00:09:31,130
Then we've got the click handler.

115
00:09:31,230 --> 00:09:36,440
This click handlebar listens out for clicks on a website.

116
00:09:36,450 --> 00:09:39,740
True there's an action in response to that.

117
00:09:39,750 --> 00:09:41,720
Click the double click.

118
00:09:41,730 --> 00:09:49,460
This is out for a double click event and triggers an action in response to that double click.

119
00:09:49,470 --> 00:09:56,280
The whole bar works when the mouse enters listens for the mouse events the movement of the mouse when

120
00:09:56,280 --> 00:09:58,080
the mouse enters an element.

121
00:09:58,260 --> 00:09:59,910
It triggers an action.

122
00:09:59,940 --> 00:10:07,830
When the mark leaves it triggers an action the mouse entered and the marcelis work in combination with

123
00:10:07,830 --> 00:10:14,460
the Hoover event and so they basically do the same thing when the mask enters and when they must leap

124
00:10:14,940 --> 00:10:23,280
whereby there is no event handler attached to an event nothing happens in response to the event.

125
00:10:23,280 --> 00:10:28,760
For example if you're trying to click on a button and there is no event handler no function defined

126
00:10:28,770 --> 00:10:31,160
behind that nothing will happen.

127
00:10:31,200 --> 00:10:39,840
In response to that so I hope you have got some insight into how Jay Query event handlers work.

128
00:10:39,960 --> 00:10:41,980
Thank you so much for watching.

129
00:10:42,000 --> 00:10:43,970
Take care and bye for now.