addEventListeners().
Published: 2022-09-14 17:19:47

About myself: 
I wasn't like destined to be a programmer or software engineer and am still learning the fundamentals to achieve the goal I have now. My goal is to live a comfortable life while enjoying my job and being able to help and support my family especially my mom, coming from a single parent household and struggling with getting the basic necessities. So I was introduced to all of this through my family specifically my aunt and uncle who both finished the Flatiron School software engineering program. I thought about it for a while and figured I can work on things that I was into and interested in on a technological level through learning how to code and be a good role model for my younger sibling and etc. I'm still a noob so I am still learning the in(s) and out(s) of everything but I feel like I have a good grasp on this concept/method. And this specific lesson seems like it will be of high importance when trying to create a user friendly system whether it is game, website, or app. 

Method:
So let's jump into what will be an important lesson as you get more into building websites, applications, games, etc. This is the addEventListeners they are pivotal in the process due to the fact that they allow you to place and action(event) on things in your code. I like to think there are two steps to achieving this in your code firstly you need to learn and become familiar with querySelector() and getElementById(). Even though they technically they do the same thing they still have some differences. The querySelector() I would say is more flexible being able to grab element name, class name, etc. Unlike with getElementBy is more specific depending on if its Id, TagName, or ClassName. And when you choose to use one or the other its probably better to stick with that method throughout the entirety of the code. Just to be safe by avoiding possible errors and keeping the code looking as neat and clean as possible.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ygfnyt95wx5lf8zb5ix.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c2yr7iw07f8cljditlmb.png)
  
Along with these there are other querySelectors and getElementBy such as querySelectorAll(), getElementBYClassName, and getElementByTagName. But the difference is that getElementBYClassName and getElementByTagName are specific to ClassName and TagName. For querySelectorAll() it allows you to grab more than one thing in the parameter for example if you put (p) everything under the (p) tag will be targeted. Or you can put two things in the parameters using a comma. And the goal of these is to grab something specific from the code so for example if I wanted to grab a button and it was under the ID of button I would put document.getElementById('buttons') and that would pull that specific ID for me. The rest of them pretty much work like that but just slightly different.

So after to grab when part of code you want to attach a action(event) to then you go to the addEventListener() part this part is important due to the fact that this is how you will get things in your code to react you actions of the user and that will make the website, app, or game interactive. For an example say you want add a click event to the button so that something pops up when you click the button. The way you would accomplish this is by typing out : 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iahstbvvkmdl2ouneen.png) 


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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6b5lk4h8opuv4m3gp223.png)

Then when it is put into the console it allows you to click the button and an alert pops up. 

Then on the other side of that you can also remove events with the removeEventListener() but obviously for the example above you would put click in the parameters instead of having mouseover in the parameters. In order to remove the click event and or any other event that is in its place. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5g5utv1lgk16a1v3egp8.png)