Event Listeners are the procedures of function in a computer program that waits for an event to occur. Examples of an event are the user clicking or moving of the mouse, pressing a key on the keyboard, submitting something, or an internal timer or interrupt. In other words when the user interacts with the DOM, events occur the way programmers want them to when a user interacts with a certain part of the website or application.
First, we will look at the element where we will be placing our event listener in our HTML file which is what will be displayed on our web browser for the user to interact with.
<!--HTML FILE--> <form id="submitdiv"> <label for="names">Names: <input type="text" name="name" id="newNames"></label> <br><br> <button type="submit">Submit form</button> </form> <ul id="log"> <!--Here our list of names will be placed--> </ul>
- We attach our newly named variable to our ".addEventListener" then assign the first parameter as the event we are trying to execute. In this case our event is 'submit'.
- In our second parameter we set an open block of code in which whatever we write inside will execute a submit event upon a click of our button that we have created inside our HTML document on our web browser.
Now let's say we want our our submit event to return something completely new to appear on our web page once our button has been clicked, In this case a name of some sort. How would we go about doing this? Let's take a look...
So first thing we always want to put inside of our submit form code block is "e.preventDefault()" and what that does is stops the page from reloading upon our submit event being triggered.
Next, we grab our "ul" element from our HTML file using "document.getElementByID" by our id name "log" and setting it to a variable. Notice that we did not have to use a hashtag for this because we did not use a ".querySelector". Second, we grabbed our input element by it's id name using the same method(no hashtag needed) and setting it to a variable as well. Then we created a new list element inside of our submit event listener by setting "document.createElement" to "(li)" and giving it a variable name. After that we set the new element "li" text content to the input value which is whatever we are typing into our "Enter Name" slot just above our submit button. Last, we need to append the "li" element and its new text content that is submitted in our "Enter Name" input slot into our already existing "ul" element in our HTML file. We do so by putting our "ul" variable along with ".append" just before our new "li" variable in parentheses. Last we add ".reset()" to our "form" variable to reset the input slot back to default upon our submit event being triggered.
This was the most fascinating part of my learning experience in Phase 1 of my 5 phase course at Flatiron School. I look forward to learning many more tools that will mold me into a top tier software developer and will help me to innovate and shape the tech industry as a whole.