JavaScript Event Listeners

When I first began my journey in changing careers I felt a lot of stress and anxiety. That feeling only got worse my first day of Software Engineering bootcamp. I sat there listening to the overview of the course and found myself feeling the biggest case of imposter syndrome.

As we began our first week we started learning about something called "Event Listeners" using the Javascript language. Similar to a lot of beginners, event listeners sounded complex. My first example or two with event listeners just made me feel even worse about the concept. Knowing that I was going to struggle with this concept I decided to put more effort into mastering it than I would have imagined. Thankfully I have phenomenal class mates and technical coaches to help simplify event listeners and understand the logic behind them.

Now if anyone has read the above and feels like they also struggled with some new concepts, I would love nothing more than to share my understanding of the logic and application of javascript event listeners.

First and foremost, what are Event Listeners in JavaScript? Instead of providing a textbook definition i'd rather just share my own definition. Event listeners are pretty much exactly what they sound like. They are essentially built in listeners within Javascript that await user action to do something. In simpler terms, imagine you are on Yelp and you just visited a very lovely restaurant. You decide you want to share your thoughts and experience on yelp, you would write a review and click submit to send it for others to see. That submit action that takes your review and posts it for others to see is an Event Listener! Instagram is another example in that whenever you like a post you are clicking the heart and the application knows to listen to your click and update the server to display that you liked said post.

Setting up an Event Listener takes a few steps and I will gladly display how to go about setting up these events. The example I will be using is actually from a project I just finished this week. The project I made was a video game database based on a very popular FPS game.

element.addEventListener('EventType', function/arrow function{})

• Step 1: Decide what event you want your code to listener for. Some very popular events include 'click', 'dblclick', 'submit', 'mouseover', etc. For a full list of possible events please check out the MDN documentation that I will paste below.

"https://developer.mozilla.org/en-US/docs/Web/Events"

• Step 2: Decide what you want to happen once you have chosen an event. This step is a little interested because you have two options. You can use an arrow function to keep the event and function bundled together in one block of code. Your other option is to use whats called a callback function. A callback function is essentially a function that you declare somewhere else in your code, but you can call it from within the event listener.

Arrow Function in Event Listener:
element.addEventListener('EventType', (e) => {})
The (e) is basically the event, now the first thing you should do when setting up this syntax is to include the line e.preventDefault(). e.preventDefault is used to prevent the browser from executing the default action. Within these curly brackets is where the programmer will write the code block that will execute when you submit whatever event you have chosen.

Callback Function in Event Listener:
element.addEventListener('EventType', callbackFunction())
The difference in this set up is that instead of defining the block of code within the event listener you have defined the function in another part of your code. Programmers will typically chose to use callback functions because it allows you to use a function multiple times without having repetitive blocks of similar code.

-Step 3: Choosing what element of your code you want to listen for events. Whether you want to have the listener tied to an image, tab, button, etc.

For the project example I will show you the code I used to display the information about the in game characters:

In the above code the element I am choosing from is the image of the "agent" I had set up earlier in the code. The click event is essentially what it sounds like, when the image is clicked on do this =>. In my example I opted for an arrow function due to my code being more linear and this being the only instance of me using this function. I use different variables to create elements in the HTML file and assigned those variables text contents that are pulled from the free API that I was using. Once I have set up the desired content needed I appended each element to the desired div container I had set up in the beginning of the code. Now with the event set up, anytime I click on an "agent" in my browser their name, abilities and description are displayed for the user.

I am truly thankful that this project required so many event listeners because this allowed me to truly master the concept and be able to apply it in the future without any struggles. I hope that this post helps fellow beginners as they try to simplify concepts and apply them to their own projects.

As I continue this path to becoming a Software Engineer I look forward to learning more concepts and mastering them and truly turning this passion into a full fledged career.