Welcome to the world of event listeners.
Event listeners are very, very interesting things.
So the first thing we need to do is look at syntax, kay?
So actually the first thing we need to do is talk about what an event listener is.
An event listener is.
When you have a button on the page
and say it says Click Me inside of it and you click that button.
What is supposed to happen?
That isn't event listener.
Or if you have an input element and you start typing in it.
Every one of those letters that you press on your keyboard is an event.
Anytime you move your mouse,
anytime you resize your screen,
anytime you focus into an input element
or blur out of an input element or like leave the input element.
These are all events and we're going to be tackling a bunch of these in this course.
So first things first, let's take a look at some of the syntax here.
So there's two ways to do this.
There's the, there's the right way which you're going to see in the jQuery docs.
And then there's arguably an even better way to do it,
which is going to be future proof to Ajax and document object model calls.
So let's take a look at both.
So first we have some sort of selector and so we can select the button.
And then we can say dot click.
And this is going to take a function.
And so without the function,
this is what it looks like. That's an event listener.
Now this function that we're passing in here is merely what we want to do.
So we can say console.log.
I am clicked.
And because we have this button on here on this page that says click me,
let's go ahead and give this a shot.
It says Click Me and in the console here,
every time I click it, it says I am clicked.
That's it.
That's all there is to event listeners with jQuery is a super, super easy.
Now there's another way to do this.
I'm going to comment this out.
And arguably this way is better.
You can have a selector dot button and then you say dot on what you want it to do.
What do you want it to listen for?
You wanted it to listen for a click event.
And then you pass in a function console.log.
This is clickable to refresh your page.
And it says this is clickable to now Justin,
really make life crazy difficult and hard to learn jQuery.
Let's learn a third way. And this is actually the best way,
but we're not going to do the best.
We were going to do the middle way moving forward throughout this course.
But the best way is document dot on click,
and then your button,
and then your function, console.log.
And let's just log 33333.
And this works too.
And so there's actually a reason we do it differently here.
And so we're going to be using this method
going forward just because it's the easiest to sort of write to understand.
And this one is a little more complex,
but there is a reason that we do the complex wave and the complex way is because what
if we ajax or dynamically created a button?
And let's go ahead and do this and I'll show you an example here.
Div ID.
Put.
Button here.
Let's go ahead and select this.
So we can do constant.
Let's call it parent is equal to that selector.
Nope, that's id selector.
Then we can do parent.value HTML.
We can put a button in here.
Click Me slash button, button, button.
And let's go ahead and get rid of the Click me one as a Click Me dynamic button.
That's what this is going to be.
Click Me dynamic button, it shows up.
There's no event listeners yet.
Let's go ahead.
And let's say this event listener was created first.
So how JavaScript and jQuery is going to work is from the top to the bottom.
It's going to select all the buttons on the page,
and it's going to register a click function.
But currently, at this point in time,
there just aren't any buttons on the page,
there's nothing to click.
Then we selected that parent and put a button on the page.
And when we save this and refresh,
we see that nothing works.
Now, that's fine.
If we can move this code below here.
Because this button is now going to exist on the page.
And then we can register the event listener.
And this is going to work. Now, That's not always going to be the case.
There's going to be a lot of times where an event listener is registered.
But then your pages going to dynamically change.
And this is very, very,
very common in modern websites. So what do we do?
Can we use this option?
Lets move this up and let's comment this out so we know that it's not going to work.
So we're now going to select a button and then
onclick and we're going to say when that button is clicked,
console log, this is clickable two.
Now the same problem is going to happen here.
It's going to look for all the buttons on the page.
It's going to try to register an onclick event.
It's not going to work for us.
Let's refresh the page and see that this button every time I click it doesn't.
Okay, so that's no good.
This is nice, clean syntax, this is nice to write.
It's not good enough for dynamic content.
Dynamic content comes in here.
And let's move this up. And so what this is saying is select
the entire document when you click the document and you click the button.
So it could be this particular button in here or
whatever you want to give it an ID or a class or anything like that.
This is your selector.
Then do a function and this is going to make your websites dynamic proof, Ajax proof.
So when things dynamically load on your page using other JavaScript,
this is still going to work.
And so let's go ahead and refresh the page.
And we see this now works.
We registered a click events on all buttons,
but we attach it to the document.
So even if there is something dynamic happening,
we can still execute this.
So this is really good to know.
Tuck this in your back pocket for now.
But we're going to be writing this way moving
forward just because it's a little bit cleaner.
Now what I would like you to do is create an event listener,
something like this. Select a button.
Dot on.
Your first parameter is going to be what are we looking for?
We're looking for a click event.
When you click the button, what happens? Then you write a function.
This is called a callback function.
And anytime you click this button,
what is it going to do?
Go ahead and give that a shot.
Once you are done with that,
let's head on over to the next lesson where we talk about
moving our mouse over an element and off of an elements.
So we're going to hover.