Event listeners are part of what makes JavaScript capable of being so dynamic, they "listen" for and recognize events. In the bootcamp I'm currently in we are taught that event listeners are basically "doing work" in response to "something happening"; now that is a pretty basic description of what happens when an event is fired off (when the "something happens") but I'm going to dive into it a bit. The syntax of a basic vanilla JavaScript event listener is broken into a couple of components: the element you want to attach your addEventListener() method to, one parameter that is the type of event to listen for, the second parameter is the function that you want to invoke when the event happens. There is a third optional parameter, a boolean value to specify weather event bubbling or event capturing should be used; I'm going to leave it at that because I really want this blog to be as beginner friendly as possible, and so far I haven't needed to use that optional parameter at all.
Anyway- the basic syntax for the addEventListener method with an anonymous function looks like this
element.addEventListener('submit', (_e_) => {
what do you want to happen when this event is heard
)}
The second parameter, the function you want to invoke when the event happens; this can be anonymous or not (for submit events you'll need to pass the function a parameter, usually its 'event' or 'e' this is because you will likely need to use preventDefault(). Personally my brain got a better handle on this when I use an anonymous function, I could wrap my head around this higher order function being a description of what needs to happen when the event occurs.
There are a whole lot of different events to listen for, you can see an extensive list on MDN, but there are two events that I think are important that a beginner should have a decent grip on, and naturally they get confused all the time. I'm going to focus on those two here. The first is a 'click' event and the second is a 'submit' event. Like I said, they get jumbled all the time, and no wonder! Most of the time with submit events there is a submit button or something similar, but don't let it distract you! It's really just there to make sure the user performs the action that fires off the event; in the case of submit events, it's usually attached to a form or input box of some kind. As far as click events, you can attach an event listener to an element that isn't a button, think of a URL that redirects you to another page, that's a click event- with no button.
I also want to touch on something that came up when I was running into challenges with submit event listeners, and it took me an embarrassingly long time to realize that no matter what, the value of the input field or form will be returned as a string, yes, this means even if the user inputs the amount of burritos they want to order as a numerical value, the data returned to you will be a string. This isn't a huge issue unless your user is trying to see the total number of burritos and tacos in their cart. The best way I have used to solve this is by implementing parseInt(), which isn't as complicated as I tried to make it, so from one over-thinker to any others out there, save yourself the headache. It will be an uncomplicated solution to this issue, it will take the string value type (what comes out of a form or input) and turn it into an integer value type. easy peasy.
I hope that something here can help another newbie like myself, because I'm finding that sometimes you really just have to speak in plain english as much as you can, not just in code. And since I'm dropping the knowledge one of my coaches has given me already; here are some questions they always have me start with when I'm in a pickle; weather thats an issue with event listeners or getting a forEach() to iterate the way you need it to:
What am I trying to do overall?
What am I trying to do on each line of code?
Am I working with the right elements to do this?
Oh, and
console.log('literally everything')
because if by chance they read this and I don't include that golden rule, I'll be toast. But you know that already; being the bomb developer that you are. ;)
sources
click vs submit
HTML forms and submit events
the ever helpful w3schools
parseInt()
higher order functions
preventDefault()
forEach()
Top comments (0)