All right welcome back.
In this video I want to talk a little bit more about some of the different types of events so far we've
encountered the click event and the change event that we used on a text input or a number input in the
score keeper app.
I'm going to start by introducing the M.B.A. event reference.
So that's the web page I'm on right here.
And this web page is a reference to all the different events that are recognized by the DOM API.
And if we scroll down you might be surprised at just how many there are.
And I'm actually going to have you in the next exercise write some code just to count how many there
are is a fun practical example of using the geometry of cons..
So you're going to count how many there are but for now just know that there are a ton of them and there
are probably five or six maybe up to 10 really common ones that will use all the time things like for
drag and drop for a hovering event click events maybe double clicks key press events but otherwise a
lot of the more obscure ones will never use or maybe you'll use them one time in a project.
But it's good to know that this web page exists that there are so many events that we may never even
use.
And this video I'm going to focus on two event in particular that has to do with hovering so hovering
over an element with your mouse.
And those are called mouse over and mouse out.
So I have a simple application and I'm going to make it's called to do that age him in my new file and
I'm just going to add my regular boilerplate and this isn't going to be a complete To Do list.
We won't be able to add new or that we're going to do is have a UL with three or four allies.
Things like wash cat feed cat and we'll do feed cat to dog and save.
So we have our three to do's and that's all we need for now.
And what I want to do.
I'm going to open this up in the browser.
I want to be able to click and that should gray out the to do item and maybe strikethrough it put a
line through it.
But I also want to be able to hover and I want to know which one I'm hovering over.
So I get this nice user feedback as I hover over one of these.
Maybe you will have it change color or bold will start by just making it green and there are so many
nice effects you can do for your user using these hover events.
So I'll show that right now before we can actually write any javascript though we need to make our file
.
So I'm going to save a new file and I'll call it to do's.
Yes.
And as always I had my alert connected save go back here and add in our script at the bottom and our
source is equal to the deuce dot J.S. and we'll save or refresh and we get our alert.
That means it's working.
Let's go at that first event that I mentioned and the first thing we need to do is select something
before we can manipulate.
So I'm going to start by just doing it to the first lie.
So I'm going to use var first ally ECOs document and I'll do a query selector ally and remember this
gives me the first lie because I didn't do a query selector all and then I'm going to add my event listener
to first ally.
So we went first ally add event listener and the event that we're listening for is not click it's mouse
over.
And then we give our callback function.
And the way that mouseover works it's going to fire as soon as we start hovering over something.
So if I was working with this last ally my mouse over it would fire right now and right now and the
second one and right now and this first one.
So it's about when the hover starts.
So first of I'd add event listener mouseover and we'll just do a log instead of a callback mouse over
and if we refresh open up our console remember we only did it to the first ally and there we go we get
a mouseover.
Also it's important to notice it's not continually firing every single time.
You know we're over this it's when our hover over an element actually begins.
So that's useful so that we're not constantly you know constantly logging or whatever the code is that
we have in the callback.
It only happens when we mouse over initially.
So rather than just cancel that logging let's work on changing the color of the ally.
Let's make it green.
So when you hover over it turns green.
So we need to do first ally dot style that color equals green and we save refresh and now watch I'll
make him a little bigger and make this a little bigger here and refresh as I start my mouse over it
turns green.
And then when I go away it stays green which is not what we want.
We just want this to be a hover effect.
So when I hover over the ally it turns green.
But when I stop it goes back to being black to do that we actually need another event and that event
will fire when our hover is over.
So when we leave this element and it's called Mouse out so we're going to do the same thing first ally
.
But at event Lessner mouse out.
And then our callback function and we'll just do a first fly style attack color and set it back to black
.
Just like that and if we refresh you can see it goes green and then the mouse out goes back to black
and mouse over a green and so on.
So now we get this little hover effect that shows us what we're hovering over basically which to do
is selected.
So now let's get this to work for every single lie.
It's just a few small changes that we need to do.
And the first of them is we need to select all allies.
Are going to change very variable to be far lies documented queries letter all allies so that gives
us a list with the three allies.
And then of course unfortunately we can't just do this lies that an event listener that doesn't work
.
We need to do a for loop four of our equals zero.
I less than lies that link.
Plus plus.
And hopefully you're starting to feel a little more comfortable doing this adding events or manipulating
something instead of a loop where we select a bunch of them and then we loop through and we do something
individually.
Like I said a few videos ago really common pattern really important that we start to get comfortable
with it.
So inside of here rather than doing first else I'd add event listener.
We're working with allies bracket eyes so that's our individual ally.
And then I'm going to just copy this code and there is a problem with this code.
I mean it will work but it won't work in the way that we want it to.
What will happen is we're adding an event listener to each ally allies.
But when we mouse over any of them we're only changing first ally dot style black colored.
And actually it won't work because first lie is not defined anymore.
We changed the name.
But that's not what we wanted anyways.
We want it to be the ally that was hovered over that the mouse over event occurred on.
So we can change this to the word this.
Remember that the key word this instead of an event listener refers to the item or the element that
the event was triggered on.
So this style but colored equal screen and then we'll just duplicate this code again.
But instead of mouse over we'll do a mouse out and instead of going to Green we'll go back to black
and then we can get rid of this and refresh and there we go.
We have our nice little hover effect.
So the last thing they will talk about is adding a click listener just to make this a little more complete
.
So same thing like I thought had event listener click add or a callback function.
And what we're going to do here is use a class.
So I'm going to just add the class first.
It doesn't exist but I'm going to say this does class list and will do toggle the start class list that
toggle.
And we'll just call the class done.
So the point is I can click on one of these and it should Gray out and have a strikethrough effect.
And even though I don't have a class done defined it's still added so I can show you that open up the
console and let's inspect one of these.
And then let's actually click on it and you can see or click on the first one you can see by the way
the color green and black changing over here as a hover.
But as I click on this first one you can see it adds class done.
And then I click again and it goes away.
So now we just need to define the class done.
So let's do that now.
I'll go over to sublime and make a new file and I'm going to save this as to do's that C Ss and the
first thing we do is define our class done.
And I'm going to give it a strikethrough effect which we do with text decoration and we set that line
through and also change the opacity so opacity will be 0.5 and save.
And then of course you need to link this to do start to assess to or aged him file with them like tag
to Due's gutsiest us and we can save.
Now let's test it out.
You refresh the page.
I hover.
So get are two events changing the color black and green.
And now I can click and we get a strikethrough effect.
And this line through as well.
There are a few small changes I would make However if we go back to our javascript file the first one
is rather than changing the color manually here.
Changing it to be green and black.
I think it's still better to do it with our own class.
So I'm going to make a new class and I'm going to call this one selected and then I'm going to say when
it's selected text or color should be green just like that.
And then we'll go with the Javascript.
And when we mouse over all we want to do is say this class list add selected.
And this comes back to that separation of concerns idea where we don't want our javascript's manipulating
individual styles rather we can use javascript to turn on parts of our C Ss and the SAS will actually
be in charge of the styling.
So that will give it the class selected when we hover over and when we leave or when we mess out we'll
do this dumb class list remove selected and if we save refresh you can see it looks pretty good.
We click we get our strikethrough.
All right.
There's a little to do list.
So this is a slightly nicer way of doing it.
Functionally it looks the same.
It's just a better practice to use classes rather than adding and tweaking styles one at a time.
So to sum up here we saw two new events mouseover and mouse out.
And we also got some more practice setting up events instead of a loop where we used this keyword