JavaScript event listeners what are they, how do you use them and what are some of the most common ones you will want to have a firm understanding of to help build out your JavaScript applications.
First things first event listeners in JavaScript are used to create an interactive webpage. This can be from the click of the mouse to when a timer goes off to change what is on the webpage. Event listeners allow for increased customization and flexibility on the webpage as well as a much better UI and is one of the staples of any application. The syntax to create an event listener is fairly simple. It takes in two arguments and can be initiated as shown here using dot notation after identifying your element(more on element identification below).
element.addEventListner("click", exampleFunction)
You will see the first argument is "click" which is telling the event listener that upon a click you want the function that is in the second argument to occur. So every time that element is clicked the function will run. A great resource for further exploring event listeners is [https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener].
So the next critical step to adding an event listener is actually adding it to the correct element. There are a few different ways you can do this. I recommend using the inspect button on the DOM to identify where you would like to add an event listener. You can go to any website and right click and then scroll down to the inspect option. A fun place to practice this is on Wikipedia. Once you click inspect you will now have access to the developer tools where you can start identifying elements. Make sure you are in the elements tab. Once you are in you can hover over different elements and it will highlight them on the webpage to help you ensure you have identified the correct element to place your event listener. Once you have your element identified you will typically use one of two different methods depending on if your element has an ID or a class name. If your element has an ID you can use the getElementById() syntax. Within the parenthesis you will insert the id as shown on the DOM and you will have selected the proper element. If your element does not have an ID you can use a different method getElementByClassName() with this method you will insert the class name in the parenthesis. My favorite way to check if I have selected the correct element is to console log in the function for the event listener as simple string of "clicked" to make sure when my event listener is called it shows console logs clicked and ensures I am grabbing the correct element.
Lastly what are some of the most common event listeners you will be using? "click" seems to be one of my most used event listeners and it triggers my function whenever the mouse click occurs on that element. Here are a few more that you may find useful. "submit" is another extremely useful event listener that will fire off your function when a form is submitted. From this submit event listener you can even have the newly input information from the form be sent to other function on your webpage. Another one of my favorites is "mouseover". This will allow your function to be triggered whenever the mouse hovers over a certain element on your page. This allows for some really fun and creative ways to have an interactive webpage. I recently built an application that played music on every mouseover of the bands picture. There are dozens of event listeners and if you want to explore them further this link is also a great reference to find the event listeners you may want to use.[https://developer.mozilla.org/en-US/docs/Web/Events]
Overall event listeners are essential to any web application and can change the feel of your website quickly. Dont forget to identify the correct elements and use two arguments when creating event listeners.
Top comments (0)