JavaScript Events
Published: 2023-02-18 02:03:52

    

Event listeners in JavaScript function by “listening” for a specified action or user input such as type (click, key press, submit, etc.), and then once the input is registered it responds by executing an assigned callback function. The callback function can be a built-in function such as “remove()” as well as a function created and stored separately in the file by simply calling to the function. In the code for my project of creating a simple workout list application, I set up several event listeners and all were unique in their type and functionality.
 
     
Here is an example of a simple event listener where I begin by creating a separate function outside of the one I was working in that displays an alert message when it is called on. I then begin creating a function that creates an html element by assigning it to a variable that I can directly attach the event listener to. I then I begin the event listener by defining the mouseover event, which is the event type I want the event listener to be attached to, followed by calling on the function I had previously created in the document as the response to the event. 

![snip1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/805znu0lyek1lrvycuqh.png)
	Another way I could have done this, and did end up doing, is to just simply define the function within the callback of the event listener rather than creating it separately and then calling to it later. 
 
![snip2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5qx75saylfskhfgglyw.png)

Although event listeners themselves are fairly simple to understand, it is important to know when and how to apply them in the correct manner and what special cases apply to certain events. For instance, a submit event can only be used on form elements. When a submit event is added to a form element, the submit is grabbing all of the elements contained in the form like lists or whatever is added by the user.  The submit event listener then takes those elements and submits them all to the wherever it is the submit event is programmed to send it to. One thing with the submit event is that they have a default behavior of when executed it automatically submits without any user input. In order to keep the default execution from occurring when the page renders, the preventDefault() method must be implemented into the function. The preventDefault() method stops the page from automatically submitting and reloading and allows for the event listener to function in its intended manner. When adding a submit event to my project, I begin by creating the submit event listener function again defining the event type and then I call the preventDefault() built-in function to ensure it waits for a user input. Then I call a function I made externally, due to it being slightly more complex than the previous scenario where I could just simply define and call the function within the callback, that targets the content of the form that is typed in by the user and adds the content to a list separate from the form. 

![snip3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v7yxexu0g2qykdqa7sz.png)

In a different case, another event type that is very similar in appearance to a submit type is the click event type. Click events are responsible executing only their assigned task, and the output will always be the same unless its programming changes. Click events and event listeners are created still in the same way as the previous event listener types but rather than being able to transfer and communicate with different elements as the submit event is able to do, click events are attached directly to an element, which becomes its parent node, and the click event will only respond to the execution of a click on its parent node. Click events are good for completing quick simple tasks on a webpage as they can only deal with specifically programmed functions. 
	For my application, I wanted to be able to delete elements created and added to the workout list by the submit event. In order to add the functionality of a click event listener to an element that still does not exist, I created the button element within the function used to create and add to the list. I used the same technique as when I created the element to add the mouseover functionality by creating the button element within the same function that created the list items and assigning it to a variable that would allow me to directly attach the event listener to the button element created as shown below. Once I created the button and added the click event listener to it, I appended the button element to the list element created within the same function. The click event called to a separate function that targeted the list item and used the built-in remove() function to delete the item from the list. 

![snip4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vruoynwle7jc7ts6um3.png)