Event Listeners

So, I’m in a coding bootcamp and it’s kind of fast pace. The first thing we went through was setting up the environment, then learning Bootstrap and Sass, next Jquery(which is played out), and last Javascript. I learned Javascript before I enrolled into the bootcamp but only doing projects that required me to log objects to the console, very simple stuff. What I wasn’t prepared for was to use Javascript to manipulate the DOM( Document Object Model) and one way to do that is to add an event listener to elements.

In order to make changes to the DOM using Javascript you can use the .addEventListener() method to and element, id, etc. For example,

const el = document.querySelector(“#inName”);

el.addEventListener(“click”,functionName);

but in order to use the .addEventListener()method a variable can used.

element.addEventListener(event, function, useCapture);

Also, I just learned what “state” mean and is sort of unrelated to this but it is just as important because it involves event listeners. It’s also important to understand the “state” in which variables or elements are in because knowing the state an object or variable is in allows a developer to better understand how to use Javascript to change, transform, manipulate, configure, and modify the DOM. For example, if you want to create a game that is able to reset to its original place it’s important to know the state it was originally in at the beginning. So, if the variable points was set to 0 there needs to be a function thats resets the points to 0 and add an event listener button that calls that function.