Hey, everyone, in this video we're going to talk about Jake Wari event, we already used some of them
like the click event, and we know that they are slightly different than in vanilla JavaScript.
So their names are a bit different.
But as you can see on this table, the main difference is that on January we don't have the on before
the event.
So the UNCLICK event in JavaScript is going to be claque in January and so on.
But we also know that the way we set the event is also a bit different.
So instead of using the equal sign and then a function, we know that in January we should use the function
as an argument of the method.
So the event is a method and as an argument, we are going to pass the function that's going to be executed
when the event is detected.
Now, always remember that if you are a bit confused with this syntax, always do it step by step.
So first you select the element you want.
So let's say it's an element with the ID of example and then the name of the event, which is click
now before doing anything, you just open and close parentheses and include the semicolon.
That's the basic syntax inside here.
We need a function.
So function open and close parentheses for the arguments.
If there are any open and close curly braces where we are going to place the code.
So this is step two and step three.
We just hit enter and we are going to write our code inside here.
So if you do it like this, you will never be confused.
Now, let's talk about an interesting event, which is the Raddy event.
So in Web development, many problems are caused because the script tries to interact with an element
that hasn't been loaded yet.
So we can avoid this by using the ready event.
So this means that first we are going to wait for, in this case, the document to be loaded or in this
case to be ready.
And only after that we are going to try to do anything with the DOM.
So let's get this and bring it to our script.
So one thing that's common to do, instead of writing everything like we did, of course, we did not
include this because we weren't using J.
Querrey, but when you start a project with J query, it is normal to first use the aready event for
the document and then all your code is going to be written inside here.
So nothing is going to be executed before we make sure that the page was fully loaded, which is good.
This is going to avoid many problems and this is so important that there is even a simpler way to write
this.
So this is how we write the same thing.
I know this is not very intuitive.
We can't look at this and figure out that this is actually a ready event on the document object.
I know that.
But this is exactly the same thing that we have above.
So this is shorter.
So let's get this one.
And let's replace it here, so in January, this is the same thing of setting the ready event to the
document object, so when we do this, we won't have the problem I've just mentioned.
So every time we start a project, we're going to start like this.
And then all the code for our page is going to be written inside here.
So now I can just erase this.
I'm going to add a comment because like I said, this is not very intuitive what this is doing.
So just a reminder that this is the ready event.
For the document object.
And now we can add another comment inside here and we could write add.
All the code.
Of your page inside here.
OK, now we don't need this for now, I just wanted to show you this.
So shift out a to comment everything.
And now going back to the course material, one more thing I want to talk about before we finish is
the on method.
So this method is an alternative way of working with events.
So in this case, as you can see, instead of using the name of the event as the name of the method,
the method is going to be on.
So then in this case, instead of just passing a function, we need two arguments.
The first one is going to be the name of the event inside quotation marks, and the second argument
is going to be the function.
So again, let's go to visual pseudocode code and let's write this step by step.
So first, the selecter for the elements, for this example, I'm just going to write element and now
the name of the method, which in this case is on.
So what we do now, open and close parentheses, semicolon.
Now, inside here, we need two arguments.
The first argument is the name of the event.
In this case, let's use click as an example.
And the second argument is going to be the function.
So function open and close parentheses, open and close, curly braces, and now that this is organized,
now that we see that we are doing everything right, we can break the line and start writing the code
for this event.
So this is another way of using events.
And at a first glance, it seems that there's no advantages in doing this.
Why would we make it more complicated if we can just use the name of the event instead of doing it like
this and then having to pass to argument?
But actually, this is very good if we want to set multiple events at the same time.
So in this example, we are setting three events at the same time and we just have to select the element
once.
So here, let's go back to the code and the way we are going to write this, if we have multiple events,
is a bit different.
So let me erase everything.
In this case.
We are going to pass an object.
So here we have an object.
Now we can break the line.
So what is an object is a set of key value pairs.
So the keys are going to be the names of the events.
In this case.
We don't need quotation marks.
So the first key or property of this object is going to be the click event.
So then we separate keys and values on object with a.
Colin, and the value is going to be the function, so function open and close parentheses, open and
close, curly braces, and this is how we write the on method with multiple events.
So inside here is the code to be executed.
And now the cool thing of doing this is that if we want to set multiple event, we just use comma and
then we can list as many events as we want so we can do like this.
And set another one, let's say the mouse enter event.
And we are doing this by selecting the element only once.
So if you're setting multiple events at the same time, it is a good idea to use the method.
Now, before we finish, I have a challenge for you.
So here we have an input filled with the idea of fullName.
Let's inspect this element.
So here it is, an input filled with an idea fullname.
And right next to it we have a hidden button.
So if you go to the e-mail here, you will see that we have a button with the display set to if I remove
this now, we can see the button.
So it's here, but it's hidden.
So what I want you to do here is the following.
So the button is going to start hidden.
Now it's hidden.
So when you start writing something, I want you to show the button and I want you to do this using
Junqueira and event.
But if for some reason I erase what's here.
So I already wrote something and now I want to see the button.
So this is what I want to see.
In case I wrote something, but if I erase everything and the fields empty again, I want you to hide
the button again.
So in other words, if there's some name written inside here, I want to see the button.
If there's nothing written inside here, I don't want to see the button.
So let's see how you solve this problem using jury and events in the next video, I'm going to be back
here to solve this in a video.
I'll see you then.