My first experience using event listeners
Tags: github, tutorial
Published: 2023-05-13 04:57:37

Returning to my programming journey is not easy. When I first started to learn JavaScript, HTML and all the other parts of Web Development (Full-stack), I thought that it was going to be easy and clean. Even thou I knew the basics of coding from Java, C++, and Python (all classes I took in community college), after the second week I realized I needed to dive in and give it my all.

Event listeners are one of the things I learned that I knew was going change my view on how "simple" coding looked. Event listeners challenged me when I began to learn. 

**What is an Event Listener?**
An event listener is a method that lets you "listen" to what ever the user does in your application. The user interacts with your application using things like "clicks" or "keypress". Some examples or real life event listeners is:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbaqx6105vmbfbb741r4.PNG)

These are some of the event listeners used by the project I have built. As you can see there is DOMContentLoad and click. These are just 2 examples of the many event listeners there are.

**What are Event listeners used for?**
Event listeners are used to read the interaction between the user and the application (web page). It gives the user the ability to use the web application as the creator intended.
 
The Event listener can be used to do quite a few things. The user can fill out a form and submit it, giving you all the information the way you want it with the desired attributes. Some of the most common ones are buttons and drop down menus which are both event listeners. When a mouse is hovered over an image and something happens whether it be the image moves or it enlarges, that is also an event listener. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2153mjvbt757g1f1j1y0.PNG)

**How do I use the Event listeners?**
When you write your HTML sheet you expect to see all the headers and forms. When you write a form, div or any other element that has input elements within it you need to use a .addEventListener() method to be able to do something with the users input or action. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sogyvtqrreqy2ujjdof.PNG)
The image above is part of the js file that I coded and it is an example of an Event listener. The pokemonChar is the element representation I used the Event listener on. The "click" is what I am waiting for the user to do on the specific element (pokemonChar that represents a div). With this information I know the user clicked a button inside the specific form I decided to invoke the Event listener. 

You can also add a callback function with the event (this is the target, such as a button or input that the user used), I would highly recommend this if you are not trying to refresh your page every time the button is pressed. Inside the function you can event.preventDefault() to prevent the refreshing of the page. You should then add whatever you want the button to do, in my case i needed the button to call another function realLifeDisplay().
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl8m6gxonlc57w0yvpf7.PNG)
To make sure you Event listener is being used correctly make sure you target the right input you are trying to use. Start by locating the correct div (or any other element that has the event button or movement) that you to target. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4acnl7lf7d5yjpjnbv9.PNG)
As you can see the in the snippet above for my event listener I chose form#userPokemon. The form is element that hold my submit event. In order to make sure that I don't accidentally choose another form or to make sure I even choose a form I identify the form with an id that I provided the form in the HTML sheet (we use # to determine the userPokemon as the id). 

**Parts of an Event listener**

Event Listeners have to be used as a method to find something within a document element, they can not be used by themselves. This is important because in order for them to work they must know where to look for the event to occur. They absolutely must have the event type in order to know what to listen for("click" for example). They do not however need to have an (event) argument for the callback function. The event argument is very useful however, because it has all the information of the event. You are able to get important information from them.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ardnh7rjqz21eihz6zkd.PNG)
In the snippet above you can see how I was able to use e.target to find the specific button that was pressed since I had 2 buttons. This helped me target the specific button element and its specific id so that an if statement used to modify exactly what needed to be modified. 

**Final thought**

Event listeners where tough to learn and how to use them. They are probably the most important and useful subjects I have learned in the course so far. There are so many ways that Event listeners can be used.