Introduction to Web APIs: Event Listeners. Before I begin, I'm gonna give a quick tour of the setup for this video. To the left, I have an HTML page that contains a form. And that form and the two inputs within the form and the submit button each have an ID attached to them. On the right, I have query selectors for the form, the emailInput and the passwordInput. Transitioning over, I've hidden the HTML so I can clearly show the form on the screen.

To begin, I'm gonna attach an event listener to the form. formElement.addEventListener. Parentheses. Now, with this code, I am stating that I wish to have the browser listen for a specific event that occurs within the formElement. The event listener takes two arguments. The first argument is the event type. So stepping back, what is an event? An event is a predefined user interaction with the web page.

Because I'm working with a form, I will use the submit event. The submit event is specifically designed to handle the user submission of a form. The second argument is the listener. Commonly, this argument is a function. Now, I could write the function directly in the parentheses as a argument. Or I can reference a function, which is what I'm gonna do here. I will type handleSubmit and note that this function doesn't exist yet. Also, there are no parentheses after handleSubmit because this is a reference, not a function call. And this function doesn't exist yet.

Now, above the event listener, I'm gonna create an arrow function. Const handleSubmit and set it equal to an arrow function and inside of the arrow function, I will alert Submit. In case you're wondering why I wrote the arrow function before the event listener, there are two reasons. First, arrow functions can't be called before being declared. The function needs to be above the event listener. Second, it is a best practice to write your event listeners at the bottom of the page to avoid issues, such as missed query selectors. Now, I'm gonna click on the submit button and there is the alert.

There's one thing I wanna point out about forms. After I hit OK, the output disappears on the right. This has to do with the nature of forms. When a form is submitted, the default behavior of a form is to refresh the page. Now, the output panel acts as a browser but it doesn't have a refresh feature. If I type or add a space in the JavaScript panel, the output will re-render. Now, there is a option to prevent the form refresh from occurring.

In the arrow function, I'm gonna add a parameter called event. When the event occurs, there's an event object that gets passed through the listener through this parameter. And this event object contains all the actions of the event plus built-in methods. Above the alert, I will type event.preventDefault, parentheses. And this is a built-in method that prevents the form from refreshing the browser. I'm gonna click submit to trigger the event again, and after clicking on OK, the form is on the page.

Now that I have the refresh prevented, I'm going to now capture the form data. And I will begin with the email address. Using the existing email query selector, I will type const email equals emailInputEl. El is short for element. And I'm gonna attach the .value property to this. So what is value? Value is the value that is currently in the form for a specific input. In this case, the emailInput. The reason why you want this inside of the listener function is that this value will be captured when the submit event is triggered. Doing this outside of the handleSubmit function could lead to the wrong or an empty value.

Now I'm gonna change the alert value to email. I will type in an email address and click submit. And the alert shows the email address. After clicking OK on the alert, the email address is still in the form. That is because the refreshing of the form has been prevented. Now I'm gonna repeat the process to capture the password input. Const password equals passwordInputEl.value. And inside of the alert, I will use a template string expression to display both the email and the password.

In the form, I will now type in an email address and password for the password. I will click on submit and the alert window shows both the email address and the password. And after hitting OK, the email address and the password is still in the form because of that preventDefault method. Now, what if I wanted to use another event listener, such as click? I'm gonna change submit to click and this is gonna present a problem, and I'm gonna demonstrate this problem by clicking in the form.

Why is this happening? Well, each event has different behaviors, triggers and properties. The submit event only focuses on the form submit action, ignoring any other events from the inputs and other items within the form. The click event behaves differently through event delegation. The form is the parent element for the inputs. It delegates this click action to any of the child elements, triggering the click event when any of the inputs are clicked.

Now, there are different ways to avoid this issue. For this use case, I will be more specific and attach the click event listener to the submit button. In order to do so, I need to create a new query selector. Const submitEl equals document.querySelector #submit. And at the event listener, I'm gonna replace the formElement with the submitElement.

Now I will type in an email address and a password into the form. Note that the click event is no longer triggering and I will click on the submit button and there's the alert with the email address and password. Now, the email address and password remains in the form because of preventDefault.

So what can be done to clear this form after submission? Going back to the handleSubmit function, after the alert, I will type emailInputEl.value and set it equal to an empty string. I will do the same for password. passwordInputEl.value and set it equal to a empty string. And essentially, here is what's gonna happen with the handleSubmit function. When the submit button is clicked, I'm gonna capture the current values of the form, display those values in an alert, then clear out those values from the form.

I'm gonna fill out the form again and click on submit. The alert pops up with the information and after hitting OK, the form has been cleared out without refreshing the page. Thanks for watching at Cloud Academy.