So then hopefully now you're pretty comfortable with querying the Dom and making selections of elements.
So now we know how to do all that.
It's time to take this one step further and look at events.
Now a lot of the time the manipulation and changes we make are in reaction to a user's action on a web
page.
For example, if a user clicks on a button, we might show some kind of pop up menu.
Or if a user clicks on a dustbin icon, we might delete something.
So I think now is the time to introduce this idea of user events and reacting to them.
So to begin with, we'll talk about click events, but throughout this series we'll be looking at all
kinds of different events like keyboard events, submit events and other types of mouse events as well.
But anyway, I've already created this very simple HTML template.
We have an H1 that says to do's.
Then we have a Ul with a few different to do's in here.
And then at the bottom we have this little button that just says Click me.
So the idea ultimately is that we're going to create this very, very simplistic to do list.
Now up at the top, I've also added a few little styles for the Li tag just so it looks a bit better.
We have a list style type of non, a max width of some padding margin, a background and a border which
is dotted.
So if I save all this, we're going to see this in the browser looks something like this.
It's not going to win style of the year award.
I just thought it might look a little bit better if it did.
A few basic styles.
But anyway, what we want to do now is react to a user interacting with this web page.
And to begin with, we're going to react to a user clicking on this button.
Now, this three steps involved to set this up.
First of all, we need to query the Dom to get the element where we expect the event to happen, which
in this case is going to be the button.
So that's the first step.
The second thing to do is add what's called an event listener to the element, and an event listener
actively listens for user events on a specific element.
And the third step is to write a callback function which will fire when that event happens, when a
user clicks on the button.
So let's set this up in our code.
So if we go to sandbox, first of all, I'm going to say const button is equal to documents, dot query
selector and we want to grab the button element.
So we have a reference to that, first of all.
So that's the first step.
The second step was to add an event listener.
Now to do that, we take the button and use a method called add event listener like so.
So this method right here actively listens to certain events on this button.
Now we need to specify as the first parameter or the first argument.
Rather in this method what event we want to listen to.
Now there's loads of types of events and you can get a full list on the website.
In fact, I'll leave a link attached to this lecture, but we're going to be listening for the Click
event.
So this is now actively listening for click events on that button.
Now the second argument we need to pass in here is a callback function, and this function is the thing
that's going to fire when this event occurs, this click event on this button.
So let's write this function and it's going to be an arrow function.
And inside all we're going to say is console, dot log.
And then you clicked me.
Okay, so if we save this now, let me just add my semicolons.
If we save it and preview, when we click on the button over here, we see this logged to the console
because we have an active event listener on this listening for click events.
When we click it, it fires that callback function and logs this to the console.
So that was really simple to set up, right?
We just get the button, then we add an event listener, we listen for click events and fire a callback
function.
Okay, so that's a very simplistic example.
Now what I'd like to do is attach event listeners to each one of these tags so that when a user clicks
on an tag, eventually we're going to delete that from the to do list.
So how do we do this?
Well, remember, the first step is to get a selection of the items or the item that we want to attach
the event listener to.
So what we want is all of the tags right here.
So to do that we'll say const and we'll call this items set it equal to document dot query selector
all this time because we want a collection of them and we want all of the tags.
So that's going to get us remember a node list of these tags.
Now on node lists, we can use the for each method because we need to cycle through all of these tags,
all of the items, and attach an event listener to each one of them.
We don't just attach it directly to items because that is a node list and we don't attach an event listener
to a node list.
We attach it to individual elements.
So we need to cycle through those using for each and attach an event.
Listener to each individual or each item inside it.
So let's take the items use for each and inside this we pass a callback function and that callback function
as a parameter takes the individual item we're currently iterating.
So inside the callback function we'll take that item and add an event listener if I can spell it.
Okay.
And we want the click event again.
So when a user clicks on one of the tags, we want to do something.
So we'll have a callback function over here that fires something.
And inside this callback function for now we'll just say console dot log item clicked.
So now then we're attaching an event listener to each individual item inside this collection of items.
So now when we click on any one of them, it should log this to the console.
And if I save it and preview and click on one of these, we can see each time we do it, we get item
clicked.
So that all works cool.
Now ultimately we want to delete the li tag that we click on, but how do we know which li tag we clicked?
How do we access that li tag when we have one of these events?
So when an event occurs in the browser, like a click event inside this callback function, the browser
automatically gives us a parameter called E or events.
You can call it what you want, but it is an event object.
I call it E.
Now we've got a parameter in this arrow function.
I'm going to delete the parentheses because there's just one of them.
And now this contains information about the event that happened on the web page.
So what I'm going to do is just log this E to the console.
So console dot log E, So this is an event object created by the browser about the event that happened.
So let's preview and let's just click on one of these.
So now we can see this big event object called mouse event.
And if we expand this, there's tons of different properties that we can see on this object.
Now, the one that we want to use is the target property right here, because this tells us which element
was clicked.
So I could say e dot target to get that.
So what I'm going to do now is console, dot log e dot target and I'm going to comment out the one above
it, save it.
And if I click on one of these, we can see now it tells us which one we clicked on.
Click on this, play the guitar, pay the bills, read a book.
So that's pretty awesome.
We easily know now which one of these tags was clicked.
So now we have that information.
We could do something with it.
Now another way to get the item which was clicked would just be to console dot log and then the item
itself.
Because we have access to that inside this callback function.
Remember, we cycle through all of the tags in the collection or the node list rather, and we have
access to each individual item at the time.
So I can do this as well as E dot target.
And if I save this then it's going to do the same thing.
We see it twice each time.
Now I normally prefer doing this because I think it's more helpful.
We don't always cycle through something so e dot target we can use even when we're not cycling through
something.
And also it's going to help us with event delegation when we talk about that later on as well.
So I typically use E dot target, but you can use item if you prefer.
So I'm going to comment these things out for a second.
And what ultimately we like to do is delete the item we click on.
Now we don't know how to delete an item from the browser yet from the web page.
So for the time being, what we'll do is just change the style of each item as we click on it so that
we get a line through each one when we click on it.
So to do that, we're going to come down here and just say E dot target to get that li tag that we click
on.
Then we use the style property.
We've seen that in the previous tutorial, and the style I want is the text decoration.
We use camel case because remember, we can't use hyphens when we do something like this.
JavaScript sees those as subtraction, so text decoration and we're going to set that equal to line
hyphen through.
So this is just a CSS property that causes a line through the text.
So if I save this now, hopefully when we click on each individual item, it's going to add this CSS
style.
So let me try this out by milk.
And now we can see it's crossed out.
Play the guitar, read a book, pay the bills.
Awesome.
So then my friends, that is how we can attach events to items.
And if we have a collection of items, then we can cycle through them and add an event listener to each
individual item.
So now we've seen how to do this In the next video.
Instead of doing this, we'll see how to actually remove elements from the Dom and also how to create
new elements and append those to the Dom as well.
