OK we'll come back.
Back in the introduction to javascript I mentioned that one of the important reasons for learning javascript
is that we can use it to make our pages interactive.
It's how we can run code when a user clicks on a button or type something in or hits the arrow key or
whatever they do.
We can have some corresponding code that is executed at a given point in time not just executed right
at the beginning of the page.
So to do that we need to talk about Dom events.
So this video will be an introduction to Dom events.
Conceptually the process for setting them up and then also the syntax.
So as I mentioned events are everywhere.
Think about when you interact with the web page the different things that happen you can click on things
like a button you can hover over a link and something might pop up.
You can drag and drop elements on certain pages.
You might want to have code that runs from the user double clicks or actually this web page has a few
examples.
This slide dot com is a Web site and I'm hitting the left and right arrow keys to change slides.
So some code is being run when I hit the left arrow key or the right arrow key or when I click over
here.
That's also an event and it's doing something it's running some code that's changing the current slide
.
So the point is events are all over the place and they're really exciting.
It's one of my favorite topics to teach because now we can make our web pages interactive we can take
the manipulation stuff that we've been learning about changing colors changing text and then we can
actually do that when something in particular happens.
So this really unlocks the potential of manipulating the dorm.
It's how we're going to make games it's how we'll make form validators tic tac toe we're going to make
a really cool color picker game and that all stems from these events.
So the way that these events work is that we actually attach them to specific elements so we select
an element like the first button or the second H-1 or the input where a type is equal to text and then
we attach an event listener to that selected element.
So as an example we might be listening for a click on a button we might listen for a hover event on
an H1 we might listen for key press event in a text input and we'll talk more about the differences
between those events.
There's so many different types of events in javascript but what's important is that we have to have
an event that is being listened for on a given element.
So just like before when I would talk about select and then manipulate that still applies.
We need to select something and then the manipulation that happens is us adding an event listener to
that thing that we selected.
There's one method in particular that we're going to use all the time which is called add event listener
.
So at event listener is what we use once we select an element like the first button or the input type
because password and we have something selected then we call add event listener on it and we give two
arguments.
The first one is the type of event that we want to listen for.
And the second argument is the code that we want to run when that event happens.
So here's an example.
I'm selecting the first button on a page doesn't really matter where the button is or how it looks or
anything just any button.
And then I'm calling button at event listener click and then the second argument is a function that
goes all the way to here.
And this code isn't run right away.
Remember this is called a callback.
This code is not run immediately.
It's only run once this event fires.
So once you click on the button javascript goes in it calls back.
This function says hey it's your moment to shine and come back here ready let's execute you.
And then that code is run and we get counseled don't log someone click the button.
So this function will run whenever a button is quick to run over with the specific button that we selected
as clicked.
So here's another example.
This case I have the mark up here a button and a paragraph and I selected both of them with Kery selector
and I save them both to variables and then all that we do is add a click listener so button does add
event listener click and then the second argument is that callback function.
And what we're going to do whenever that button is clicked is changed the paragraphs text content to
be someone click the button and you can see when I click that button it changes from no one is clicked
me and to someone has click the button.
So now I'm going to do a quick demonstration using our Dom demo page let's start by making this H-1
right here.
Change color when a user clicks on it.
So to do that we need to start always by selecting the H-1.
So we have a bunch of options there.
I'm going to just use queery selector document that query selector H-1 make sure we have it.
All right.
Then we just write H-1 that add event listener.
Remember there's two arguments.
The first one is the event that we're listening for.
And we'll spend some more time talking about the different events the different options.
For now we're just doing click and the second one is the code we want to run when the user clicks.
So function and just start really simple and just do an alert when the user clicks.
So we'll do a alert each one was clicked just like this.
And now let's hit enter.
Nothing changes right away.
But now if I click on the one so I'll close this.
If I click anywhere on the page.
Aside from the H-1 nothing happens.
As soon as I click the H-1 though it tells me H-1 was correct.
So that's important.
It only applies to the H-1 but that does mean I can go over here and click because remember if I inspect
this
the H-1 goes all the way across the screen.
So just something to keep in mind that's fine for us in this case but it will pop up occasionally where
things behave a little bit different than you might want them to and you need to use them CSSA maybe
to shorten the stage one or you change your listener anyway.
So rather than just alerting Let's try doing something else.
And if I just hit the up arrow an add event listener click and I change the code in here and I do something
like H-1 that style background equals and let's do orange orange background and I hit enter.
Again nothing changes right away but when I click pay attention to what happens the first thing that
happens is that it still says in an alert that H-1 was clicked.
And then when I close that it then changes to be orange.
So the moral here is that we can have more than one listener on a given element.
When we click on that H-1 the first listener that we added was listening for a click and it ran an alert
and then we added another listener afterwards that also listened for a click but it changed the background
color.
So when I click both of them run.
And thats always going to happen for now if I click again I get the alert and its changed to orange
of course you dont see that because it was already orange but you have to trust me.
It keeps changing it to orange over and over and over.
OK I I'm going to refresh and get rid of all of that.
I also want to do a quick demonstration by adding a listener to the UL.
So lets do a document dump query selector UL and remember we have three allies instead of just one ul
.
So I'm going to show you what happens when we set it on a parent element like that.
Well and I'm not going to use a variable just going to do this here.
Adamant listener.
Click.
So that's first argument.
The second one is the function that we want to run
just like this.
And I'm going to start.
Let's just do a console that log well was clicks and you know what.
That's passive voice.
Bad idea.
Let's do.
You clicked the UL much much better.
OK.
So let's keep the console open and let's click on the UL.
But how would we click on the oil.
Because the well has three allies inside of it.
The UL is this entire thing right here.
So any quick doesn't matter which ally I'm on just anywhere in the well.
You can see the number incrementing here.
Any quick on the well it's going to execute this console dot log.
So let's refresh one more time and this time let's say that I want to change the ally itself.
When I click on an individual ally I want something to happen.
There are a few ways of doing that.
And we're going to start with just the simplest one which is attaching one listener to each ally as
a heads up.
What we will be doing eventually is attaching one listener to the UL and then inside of that listener
.
We're going to detect which lie specifically inside the UL was clicked on all with one Lessner.
For now though we're going to added a separate listener to every lie so we need to start by selecting
the Allies so our allies equals document dot queery selector all ally makes sure we have them all.
All right then we need to do a for loop.
So for var I equals zero.
Remember that I said we'd be doing this all the time.
So I less than allies that length I plus plus
just like that.
And then inside of here we're actually going to add a listener to each individual ally.
So that looks like this.
Elyse I so that gives us the specific ally and event listener
click function just like that and done this a little bit.
And then the code that we want to run.
Let's change the color of the ally that was clicked up and let's just change it to be purple.
So we have a few different options.
What I need to do is refer to the ally that was clicked on.
So I could do this allies I although that's not really a great solution because there there's a much
easier way of doing that which is to use this keyword.
So inside of a listener the key word this refers to the item that was clicked on or the item that was
hovered on or the item that the key press occurred in wherever the element that goes right before the
at event whatever whatever's selected there is what this refers to.
So I can write this dot style that color equals purple.
And actually that's something more obvious.
It is a small font.
So let's do pink just like that.
I hit enter.
Nothing immediately happens but if I click on an ally you can see that it changes to be pink.
And if I keep clicking keep changing to pink You just can't tell.
So this pattern here of selecting a bunch of things looping through them individually and adding an
event listener to each of them is really really common.
We're going to see it all the time in the next few projects that we make.
The last thing I'll mention here is that you don't always have to use an anonymous function like we
did here where you write function with parentheses and you don't give it a name.
You don't have to do that.
You can declare a named function separately like I did here.
Function change text and then all that we have to do is say button that add event listener or click
and then we give it change text.
Notice that we don't have parentheses afterwards because I would execute the function immediately which
is not what we want.
So we're just passing the value of this function we're passing the content basically to this quick listener
and saying here's the function I want you to run when the user clicks on this button.
But don't run it just yet.
So these two will work exactly the same.
It's just a matter of preference.
For the most part there are some differences that we may encounter later.
I would much prefer to use this.
The only time when I wouldn't use an anonymous function is if I needed to use that code again somewhere
else outside of the clock listener.
So if I wanted to run it myself individually or I wanted to run it instead of another quick listener
rather than duplicating this function I would give it a name and then duplicate just the name where
I use it twice.
OK so next up you're going to get a chance to do some quick exercises using quick Wisner's and some
of the things we've learned in the last few videos.