Javascript 101 Event Handling question

Javascript Course 2021
#1

I’m not sure will this question be answered in the later videos, but I would like to ask in the video the following command is used:
const $form = document.querySelector(‘form’);
function submitHandler(){

}

$form is used because in the example he is showing there’s only one form being used. but let if there’s more than one form and/or textbox to be filled, what should I used?

thanks

#2

If there are more than one forms, then you’ll have to use document.querySelectorAll instead of document.querySelector. Then you’ll have to iterate on the result and attach the event handler one by one.

const $forms = document.querySelectorAll('form');
for (let $form of $forms) {
   $form.addEventListener('submit', submitHandler);
}

The alternative is that you select one single container of all the forms (e.g. the body tag) and use event bubbling to handle all submissions in one place. For clean code reasons I only recommend this if all your forms contain the same fields, they are just positioned in multiple places due to user experience. Otherwise, you’ll have different event haldlers for different forms.