Alright, let's learn about events and event listeners. Events are emitted by your elements whenever something happens. For example, when a button is clicked, when your mouse is moved, or when a form is submitted. Event listeners allow you to listen for a specific event and react accordingly. So when a button is clicked, run this block of code, or when a form is submitted, run this block of code. Now, we already saw a quick example of event listeners in the previous chapter, but let's dive a bit deeper in this video. So again, I have some boilerplate HTML here with an unordered list of to-dos. We also have an edit to-do button within the list item.

So again, I have some boilerplate HTML here with an unordered list of to-dos. We also have an edit to-do button within the list item. We have a button here to clear all the to-dos, and we have a link here. So say we wanted to run code whenever we click on this clear all to-dos button. So as always, first we have to select it. So we have this button here with a class of clearToDos. So let's go ahead and do that. Let's say const clearButton equals document.querySelector, and let's select it with the class. So .clearToDos. Now we can make use of a method on the element.

So clearToDos. Now we can make use of a method on the element. So clearButton.addEventListener. So we're adding an event listener on this element. You can specify the event as a string. Let's stick with a click. So whenever this button is clicked, and the second param is a callback function. So let's just do it inline for now, say function. Or you can make use of arrow functions as well, but I'll just stick to this way of writing a function. And within the function body, we can perform any action in here.

you can make use of what you learned in the last chapter. For example, if we want to change the contents of this H3 here, we can do that. So let's just do that directly within here. Let's say document.querySelector. Let's grab the H3. Let's change the text content to changed. And that should be fine. So now when we click this button, it should update the H3. And it does. And we'll make sure to implement an actual to-do app in the future.

And it does. And we'll make sure to implement an actual to-do app in the future. Now, if you wanted to, you can actually pass in a real function in here instead of this anonymous function. So let's go ahead and do that. So let's just grab the contents of the function. Let's get rid of this. And how about we define a function named handleClick. And we'll just pass that through. And let's define that up here.

And we'll just pass that through. And let's define that up here. So function handleClick. And let's just paste it in the body here. And that should be the same result. So if I save this and click the button again, that should still work the same way. Now let's take a look at the optional event parameter that the function can accept. So before we do that, I'm actually going to select this link as well.

that the function can accept. So before we do that, I'm actually going to select this link as well. So the link to laracasts. So let's do that. Let's duplicate this. Let's name it link. The querySelector in this case will be .link for the class of link. Okay. Let's add an eventListener on that as well. So let's duplicate this.

You can name it whatever you like, but it's usually named either e or event. Let's stick with event to be explicit here. And this event object has a bunch of information about the actual event. So if we just console.log that, let's see what it has. Save that. Let's click the button instead. And you can see it's this pointerEvent, which has a bunch of properties on it. It also has a method named preventDefault, which prevents the default action of that element. So let's run that instead.

which prevents the default action of that element. So let's run that instead. So let's get rid of this. Let's say event.preventDefault(). And now if we click the link, we are preventing the default action. And for a link, it's no longer going to go to that link. So now if I save this, click on the link, we do get the same functionality here, but it's no longer going to the link because of this preventDefault call. So that's one of the uses of the event object,

then it's just going to keep running that function. If we wanted to remove that functionality, we can make use of removeEventListener. So how about we run that within the clearButton, and we'll do it within this function. So it should run once, and then we'll remove it down here. So clearButton.removeEventListener. So down here. And the params are the event we're removing. So in this case, click.

And the params are the event we're removing. So in this case, click. And we need to pass it a reference to the function being used. So in this case, we have that reference. It's called handleClick. And if you're using an anonymous function, like I showed you first, then you won't have a reference to that function. So make sure you have an actual named function if you want to remove the event listener.

So make sure you have an actual named function if you want to remove the event listener. If I click the button, all of this should run, but it'll get to this line and remove the event listener. So the clicks after that should not work. So if I click this button, the first one should work. But if I keep clicking, nothing happens. And I'm clicking here, and nothing's happening. So the event listener was removed correctly. Now let's take a look at adding events to multiple elements.

So the event listener was removed correctly. Now let's take a look at adding events to multiple elements. So we have these three edit buttons here. Let's take a look at the HTML for that up here. They have a class of edit to do here. And of course, you can just add individual event listeners for each of them, or you can select them using querySelectorAll, loop through them using forEach, and then for each iteration,

loop through them using forEach, and then for each iteration, add the event listener for that element. So let's go ahead and do that. So down here or up here, let's select all of the editToDo buttons. So let's say const editButtons equals document.querySelectorAll. And the class was editButton, I believe. Or was it editToDo?

And the class was editButton, I believe. Or was it editToDo? I think it was editToDo. Okay. And let me just console.log that to make sure it's correct. And we do get a NodeList. So now we can loop over those and add an event listener for each iteration. So down here, let's loop over them. So let's say editButtons.forEach.

So down here, let's loop over them. So let's say editButtons.forEach. And let's say for each iteration, we should get an editButton, singular. This is a callback. We'll use an arrow function here. And then we can do the same thing here. So let me just grab this. It's now an editButton. We're adding an event listener.

It's now an editButton. We're adding an event listener. click is fine. And I'll just make a function here named handleEdit. Okay. Let's define that right here. Function handleEdit. And we'll just console.log something. So console.log. Say editingToDo.

So, so far we've just been working with clicks, but there are a bunch of other ones. Let's start off with doubleClick. So here we can say dblClick. So now the clearButton will only run this handleClick method if we doubleClick. So if I save that, singleClick will not work, but doubleClick does work. Cool. Let's take a look at mouseEnter.

Cool. Let's take a look at mouseEnter. So if I change this to mouseEnter, save that. And now if I hover over the clearAllToDos button, it should fire that event. And that didn't seem to work. Let me just refresh this. Try again. Let's hover over it. And now it works.

Let's hover over it. And now it works. Cool. mouseLeave is similar. So let me just change this to mouseLeave. And now if I enter it and then leave, it does run that method or fire the event. How about mouseMove here? Let's change this to mouseMove. And this event should fire every time the mouse moves.

Let's change this to mouseMove. And this event should fire every time the mouse moves within this element. So if I save that and move my mouse within this button here, oh, it's not working because I'm not focused. So if I focus Chrome and move the mouse, it does work. And you can see it firing multiple times as I move my mouse. So how about we add this event on the entire document itself.

as I move my mouse. So how about we add this event on the entire document itself or on the entire body? So let's grab this. Let's paste it down here. Let's say document.body. We're adding mouseMove. Let's just do an anonymous function here. Let's say function. And how about we just console.log.

Let's say function. And how about we just console.log. Actually, we have to take in the event parameter. And I believe there's a property on the event named clientX and clientY, which are the current X coordinate and Y coordinate. So say event.clientX and also event.clientY. So if you're working on some sort of app that requires coordinates, for example, some sort of game, then you can make use of these properties.

as well as some form events. So let me just comment this out for now. Let's change this one back to a click. And I'm going to paste in some HTML here for a form and some form elements. So if I go up here after the link, let me just paste in this form. And pretty straightforward. We have a form with an action. So this element has some default functionality.

We have a form with an action. So this element has some default functionality. We have an input type equals text. And let me just scroll down here a bit. Oh, I have to save it first. Let me just save that. There's the input type text. We also have a select or a dropdown, which is a dropdown of car makes right here. And we also have this radio input with a few options,

which is a dropdown of car makes right here. And we also have this radio input with a few options, which is this right here. And we have a submit form here, which submits the form. So let's take a look at a few keyboard inputs we can make use of. So if I scroll up here, actually down here back to our JavaScript, we have to select our input. I believe I have a class on it.

we have to select our input. I believe I have a class on it with an ID on it named firstName. So let's grab that. So we can grab it right here. Let me just duplicate this one. Let's name this one myInput. And it's named firstName with an ID. And down here, let's add an event on it. So it's myInput.

And down here, let's add an event on it. So it's my input. Let me just move this up a bit. addEventListener. And we'll start with keydown. So whenever any key on the keyboard is held down, then this event will fire. And we'll just make use of a callback function directly. So let's say function. Again, we'll take in the event.

So let's say function. Again, we'll take in the event and we can do whatever we like in here. So just to prove that works, let's say console.log key was pressed. Let's save that. Let's go to that input. Let's type in it. And you can see key was pressed. Now another property on the event object is event.target.

And you can see key was pressed. Now another property on the event object is event.target. So let's console.log that. So event.target. And we're going to get the element where the event was fired. So in this case, we'll get the input type text. So if I type in here, we do get that input type. And if you want the current value of it, we can grab that as well.

And if you want the current value of it, we can grab that as well. So value should be whatever you typed in the input. And now as I type, let's type in my name here, A-N-D-R-E, we do get the value. But if you look at the output, it's one character behind. So if you need to grab whatever the user types, you want to make use of a different event, and that's keyup.

you want to make use of a different event, and that's keyup. So this will fire whenever a key is released. So keyup. And now that should be in sync with whatever the user types. So A-N-D-R-E, and that is working. Last we have here, we have focus and blur. So focus is when you obviously focus the input, and blur is when you focus off of it. So let me just duplicate this.

Now, what about this dropdown here? So say I wanted an event that fired whenever I changed this value. So again, let's take a look at that dropdown. I believe it's named select or cars, I mean. So where's the select input? It's right here. We have an ID of cars, so we can grab that as we've been doing. So let's grab this one.

so we can grab that as we've been doing. So let's grab this one. Let's change it to mySelect, querySelector cars, and we can add an event listener on this. So if I scroll down, let's duplicate this one. It's named mySelect. And let's take a look at the change event. And again, we can make use of event.target.value

And let's take a look at the change event. And again, we can make use of event.target.value to grab the actual value. So event.target.value, and let's see if that works. Now, if we go into our browser and change the value, that should run. And it does work, cool. Now, for radio buttons, it's a bit different. We have to add a change event on each item.

Now, for radio buttons, it's a bit different. We have to add a change event on each item. So let's take a look at that quickly. If you take a look at the structure of the radio buttons, so up here, we have to select each button here. And for radio buttons or radio groups, we have to give it the same name. So in this case, the name is languages. So we have to select that first. So down here where we're selecting stuff,

So we have to select that first. So down here where we're selecting stuff, let's say my radioButtons, querySelector is, in this case, it's querySelectorAll because we want more than one, and we want an input element. So input with a name. So we need square brackets, name equals languages.

So I believe we already did something similar with the foreach down here. So we can just duplicate this. Let's say my radio buttons for each radio button. This is also a radio button, addEventListener. We can also use the change event here like we did for the select. And let's define a function directly in here. Let's grab the event here. And how about we just console.log the actual value.

Let's grab the event here. And how about we just console.log the actual value. So radioButton, I guess we don't need the event.value. Okay. So now as I change this, it should show the value. HTML, CSS, and JavaScript. And one last thing here, and that's listening for the form submission event.

And one last thing here, and that's listening for the form submission event. So we have this form here, as you saw, the action is to submit the data of the form to server.php, which obviously does not exist, but that's the default functionality. So if I hit submit form, you can see we get this error because server.php does not exist. So usually with forms and JavaScript,

because server.php does not exist. So usually with forms and JavaScript, you want to intercept that form submission and just do it programmatically within your JavaScript. So there is a submit event we can listen for, and then we can prevent the default. So as always, let's select the element, in this case, the form. So down here, let's grab this one. Let's paste that down here.

So down here, let's grab this one. Let's paste that down here. Let's say myForm. Let's just grab the form. There's only one, so form is fine. And then down here, we can add an event listener. So myForm.addEventListener for the submit event. And again, let's say function event. And let's preventDefault here.

And again, let's say function event. And let's prevent the default here. So event.preventDefault(). And let's just console.log something here. Let's say processing the form. And let's see if that prevents the default. So let's save that. Let's submit the form here. And you can see we do get this console.log. And if you actually do want to submit the form

And you can see we do get this console log. And if you actually do want to submit the form after you process it, you can call the submit method on the actual form. So we can say myForm.submit after all of this is run. So whatever you need to do to process the form. So if I save that, you should quickly see this console log before the form submits.