Hello and welcome to this Jake Query.
Let's show on event handlers event handlers are use to respond to events on a website.
Events on the other hand are visitors actions on a web page saw things like move in a mouse or via an
element is known as an event.
Selecting a button is known as an event.
Clicking on a search bar that is an event moving your mouse over an element or more your mouse out of
an element is known as an event.
And there are event handlers that are used to respond to that event.
This is the anime Web website home page.
I am currently interacting with a website.
So if I click on this little button here that is and event is a click event and the response to that
is handled by an event handler.
So fact.
Quick.
See what happens.
It displays this speech and there is a function under that click which is known as an event handler
that triggers this p been displayed.
Again if I click on this log in button here.
That is an event.
See.
Click event and the corresponding action is controlled by event and see if I click on the log In the
event handler listens for that click and displays this.
This log in details so the event handler I use to trigger an action in response to an event.
I got my sample web page on the right here and got some code in my text editor on the left.
I have created several event handlers to respond to actions on this Web page here.
So let's have a look at the code to begin.
I specified on line 6 the source which is a reference for d g.
Query library VI.
A content delivery network so there has to be specified first.
Then on line it that's my script tag that enclose this piece of code that will respond to the event
and event handlers on this page.
So that's the beginning script code and that's the end of the script tag there.
So this line here Line 9 does says documents ready.
This Select Tool here is the document and they've got the dot ready.
From what they document don't read the event handler does it listens out for the web page.
Make sure that the web page page as fully loaded and as ready to be manipulated before he allows the
code or corresponding code to execute.
So he holds back the code from executing until the page or website as loaded.
In this line here line 11 I've defined is select top select.
Here is the div which is box here and the div here was defined in the hastier male part of the body.
So this is a diff here giving it a D or D.
And I've got some text here which is if you can see there so that it did define it.
This is the success I have applied to the div to give it with a height margin and have added some other
properties collar and so on to make it look presentable.
And I have attached such an event handler.
So we got to start with a first event handler.
So in between we read perreault.
This is I have stashed in whole the whole event and today's Deve.
What that means is that I wanted to listen out for any or all right when you put your miles of something
in a mole without.
I have told you to listen out for Amy or that event and respond the response I've told it to give is
indicated in these two functions between the parenthesis the red parenthesised the first response I've
said it should do this.
I have attached a dotsie a sense function to this select all this solotaroff refers to the current element
being worked on.
Which is the diff in this case.
So this select was referring to this is a tad doxey as this.
I have attached a dot Sears function to this cell.
What that will do when the mouse enters the box.
It would change the background column to read so as enter is change to read and then I've defined another
function here that when the mouse leaves or when the whole rise out of the box turned to column blue
so this is easy and this is out to the front.
The BP in the baron.
This is I have defined two functions one when the mouse enters one when the mouse leaves.
So that is the response to a whole VAT effect all by basically when it mask enters when the master key.
So let me put this.
This is the original collar.
Now defined in the scene sets.
So you find that all mammals all vote it'll go rent mouse out.
Blue is just what this function do.
These two functions that I have defined between.
Read parentheses in response to the dot over event handler.
The next event handler I have attached to this as well this a double click.
I have told it to listen out for any double click event and this is the response that told to give in
between this.
This is a function here.
I've told you that if there is a double click on.
This little refers to this deal here.
So if there's any double click I want the colour of the div to go green.
So let's check that out.
So if I double click it will go green.
See that.
That it's a double click.
And that has gone green.
That's what I have defined here.
So next I'm going to show you a click.
So I've attached a click event handler to drive this same day.
And this is what I've asked Steve to do define in this function here.
I have attached a doc see SS function to it.
This Selecter this alone refers to a diff.
Been defined there.
So what I'm saying is that when there is a click a little link click hunter that listens artfully click
on this div.
If there is a click I want the quality changed so purple use in the dots here says function.
So I click once it's gone purple.
All right ask what this function does the function is defined here in response to a click event the
mouse enter the mouse leave.
They work in combination with the hova effects or Miles any time.
Basically when the mask enters a mouse leave is bisley when they must leave.
So I've already defined that shone in the whole.
So that will cover both of them must enter the mast leave.
When you're writing your code don't forget your semicolons very important.
If you miss the semicolon the code will not work properly.
Cause he will know.
The browser will not know where the code ended where that line of code ended.
So semicolon indicates the end of the code line.
Very important to indicate that and make sure all your braces match up your Param theses and they all
match up as in this lecture.
We covered what J query event handlers are events handlers are used to respond to events.
Events are visitors actions on a Web site.
So the first we went through was a document a ready event handler.
What that does it checks to make sure the page or website is fully loaded and ready for manipulation
before it allows the code to run or execute.
Then we've got the click handler.
This click handlebar listens out for clicks on a website.
True there's an action in response to that.
Click the double click.
This is out for a double click event and triggers an action in response to that double click.
The whole bar works when the mouse enters listens for the mouse events the movement of the mouse when
the mouse enters an element.
It triggers an action.
When the mark leaves it triggers an action the mouse entered and the marcelis work in combination with
the Hoover event and so they basically do the same thing when the mask enters and when they must leap
whereby there is no event handler attached to an event nothing happens in response to the event.
For example if you're trying to click on a button and there is no event handler no function defined
behind that nothing will happen.
In response to that so I hope you have got some insight into how Jay Query event handlers work.
Thank you so much for watching.
Take care and bye for now.