Welcome back, my friends.
Welcome to another lecturer's show today where we are going to talk is going to talk about event listeners
and we can associate event listeners to anything we want.
But usually in our program, we do associate with buttons or when we click something.
Right now, the first thing is to find out what we're going to start.
We've got to start with this button reset here.
So I'm just going to open it, inspect the element.
And I do have this FFA.
So it's a traveling week, but it doesn't go anywhere.
Now, I'm going to show you one thing.
She's going to remove this from here and save it, refresh it once.
So don't don't want to have anything in my traveling, traveling now, I've created app for games and
you should create one and link it here.
How cool is this?
Now let's start.
So first I want to select this little reset.
So I'm going to do this documentary query selector in here.
I'm going to say, OK, Dot begin select.
No, it was preset.
Sorry.
Now I do so like this one with Dot because that is the class name, right.
If there is what I do here, it would, it would be different with a hash.
Now I want to associate element listener here and I want that the first part, it takes two parts.
The first part is actually what we are going to do.
So it's the event that we are listening for.
And that event is click.
How cool is this?
The second part is a function.
This is a name function.
You will learn a lot of about these things we need to close.
It is called single in there.
Now this is a name function, doesn't this callback function doesn't have any name.
Right.
So you're going to see I'm going to show you a little bit different.
Now I'm going to say, OK, I'll learn and I'm going to say, oops, give me a reset button.
Here is button is short for any shortfall button.
Click right now.
Let's test it out if it's going to work.
So when I click here, here is the reset button is clicked.
So we associate event listener to this button when we click.
So that's the event in the function is actually we can do whatever we want here, whatever we think
that is necessary to do, we do it here.
OK, now we can achieve the same thing.
We can do a lot.
And I'm going to say I'm going to copy the same thing.
I'm going to put it here and I'm going to show you some things that you need to understand.
I'm just going to refresh here, OK?
Reason.
Very good.
Where is it?
And I'm going to come along and see what's happening.
See, it's submitting this one.
So all of the forms, all the links, their job is to submit somewhere because I don't have anywhere
to go.
It's submitting to the same same page.
Right.
That's why it's refreshing, this one.
And that's bad because you can't see the result here.
And that's its default behaviour of these forms, because the form up here is going to do the same thing.
It's going to send something right.
We don't have any action to go actually to some index of BHB, but it will send somewhere if we have
a link here or even the button, if it's submit, it will send.
Right.
So that is the that's the default behavior.
So how we can stop this default behavior.
So this function here is empty.
We can just pass here the E that is called event object.
And what we can do with this event object, we can prevent the default.
We can call this function.
Don't worry about if you if we not if you don't, I'm not going to explain too much.
But what it does this is actually well, OK, we'll say yes.
Here it is.
The button is click and I'm going to stop work for submitting.
The link will not go where even if I put here in the link, I don't know if I put to index html or or
I don't know sender HTML.
It's not going to go there.
Right.
Because we are stopping the default behavior.
How cool is this.
Now that's all nice.
And then, then we're going to continue doing something else.
So what I'm going to do so I'm going to say OK, I want this button when it's click this button is actually
we do have the ID here and I d I'm just going to say that if you don't have that, I'd just add that
there.
Right.
And how we target the IDs like this.
And now, OK, let's let's just say that this is working.
The add button is clicked.
Cut.
Let's refresh the ad.
But it is click.
If I click here, the reset button, the air button, and it's going on and on, it doesn't matter.
What we do is on and on, right.
It's going to refresh.
So this is what a name function.
But I'm going to show you that we can cut this part.
We don't need it here.
We can close it and we can see you get on click.
What's happening?
What about when I when I do that?
It's annoying.
All click.
So this is actually the name of a function and we need to function on click.
You need to name it here.
And that the thing that we cut, I'm just going to pasted it here, but it's not like that.
I'm just going to kill this part, kill this poor hand.
I'm just going to say here eat because again I need to pass this event object, this event object we're
going to prevent from the default.
OK, I'm going to change here.
The add button is clicked.
I just don't want to.
Yeah, the reset button is clicked in the ad, but now it's working completely.
Now we can cancel like this bad boy here, this event.
So when I Konza like, I will see a bunch of things.
So it's click the target is the I f f a plus circle.
Right.
Why is that.
Because now our button you do have these eyeglass.
That is why it's happening like this.
We have the buttons, client X, client Y.
These are the positional coordinates.
I will just show you in a minute.
So if you go to the down there or there, like a lot of things, just going to zoom in now.
It's saying you've got your keys holding hope, is that right.
So is trusted through layer x, layer Y, you don't have to know all of this.
So page one and page X actually we can get all the original target is this one.
Right, so you can access all of these things.
I don't know if you can access the original target.
And let me let's see.
Yeah, probably now there is the target.
Here is this one.
There is a timestamp, the type of it.
So what we can do, we can just access this one here.
So if you want to check right, you can do it like this.
Now, let's put it put it like this.
Console the lock and I will say e dot target.
It should give me the target.
Right.
I'm not sure if it is the target.
Is this I f a circle.
Right.
So we can do a lot of things here so I can get, I can get this one is inside the button as I explained
here before.
So what we can do from the previous lecture can get the parent node of this one.
I could go with that.
OK, let's get the parent node.
So I'm just going I'm just going to copy this one based on their inside target in OK, that parent.
Note in I hope it's going to give me the button, I hope here is the button.
We do have the button, the class in the IDs so we can grab all of these things.
So if we need something like that, we can grab now we can just say, OK, get me the parent.
No idea who is this?
Maybe you need this idea for something.
I shouldn't do that.
All right.
So when I clicked so that there is that one, so you can put it this one, the class.
So it's undefined.
OK, it's probably it's not a class, it's a class list.
And I need to refresh your area.
I'm talking, Liz, and add items and stuff like that so we can access all of these 01 things like that.
Oh, good.
You don't have to worry about it.
Now, what else we need we can do here and we can just say, OK, what's what is the just going to come
out of this one?
Because this is too much writing and too much deleting.
I'm just going to get the time.
Remember that that was what clicked and that was here.
When you do it here, it was saying, OK, that was click and this type can be different.
I'm going to show you why I'm saying different.
I'm just going to copy this one comment.
This one in the top can be, for example, mouse over and I'm just going to reset.
So when I do mouse over over that one, I shoot.
I would expect these all these here in the function to be executed.
Right.
So I'm just going to go there is going to give me that pointer.
And here he is in the mouse over.
How cool is this.
Everything we can do.
You're learning a lot of things, my friends now so that we know the type.
OK, what we can do, let's see what we can do else.
I have no idea.
We can do a lot of things if we want now.
So what we have here is a type timestamp.
We can get the timestamp.
OK, Timestamp.
Yeah, I'm just going to put it here.
I need to refresh, by the way I put it, it's undefined and it's undefined.
Let's see.
Uh, Timestamp, what did I have?
OK, because ass's with smaller.
It should be with capital.
Right.
I'm just going to refresh it.
I put it like that in timestamp that's going to give you the milliseconds.
Right.
What else we do have here?
Let's just check.
There are a lot of things you can do.
You can print a lot of things here and yet timestamp unclick.
So obviously, I'm not going to go through each and every of them.
Right, because that is not healthy.
Not neither for you, neither for me.
So we can get the offset and the page X and page Y, I'm just going to show you that so is going to
say, OK, page X and page page Y.
So I do expect that were you.
It is now the thing is that these coordinates or relative to the where the bottom is placed in the window.
Right.
So one X the Y was for vertical, the X was for horizontal, vertical and horizontal.
For example, if I lower down this window and if I click it again, just wait.
You will have a different values.
Right.
So nine, eight, five pretty much similar to this one, but eighty seven because that, that is from
the Y here.
Here it is.
The Y is coming from top so I have eighty seven pixel from the top and I do have from the right nine
hundred and eighty five pixels so we can change even that.
So if I do it like that's not good.
So if I do it like this, look at it now we just have it in it.
So if you're doing ninety inspector actually here I don't want to bother you too much so you can just
put it here in a come in inspector and see how many pixels you are, right.
Yeah.
But that's that's a little bit complex here.
I'm just going to close that one.
Just going to go to the console.
So now it will be different.
And if I click if I do this, for example, if I do this and if I put it around here, I do expect eight
hundred by something.
If I can see it right now, we can just see it.
So, yeah.
Six, eight, six, eight by two.
Forty six.
Now you know these page X and page one.
Sometimes developers use it and.
Yeah.
So you can pretty much get everything from these kinds of log even object.
So thank you very much.
Now you don't have to add event listeners on click on mouse over.
Are we going to do in our course we're going to do this.
So don't worry about are you going to learn them?
So if you like this video, please thumbs up, subscribe, share it, give a five star rating if this
is in the course and whatever you want, if you need something, just contact me.
That's a thank you.
Thank you very much.