All JavaScript libraries and frameworks provide abstraction for event handlers. But it is important to know how how the addEventListener method works and how to use it
In this article, you will learn about the JavaScript addEventListener method. This isn’t an in-depth discussion but a way for you to get started using this method. There are quite a few JavaScript libraries out there, such as jQuery and Angular, that handle adding and removing event listeners, but it’s a good idea to know how to do it in native JavaScript.
JavaScript Development Console
All of the code examples we are about to go over can run in the JavaScript Development Console that comes with your browser. We strongly recommend entering these examples into the console as we go over them so you can get a hands-on learning experience.
- If you use Microsoft Windows, you can get to the JavaScript Development Console in Google Chrome by pressing Ctrl+Shift+I, or by going to Settings in the upper right corner (three dots), select More Tools, then select Developer Tools.
- You can get to the JavaScript Development Console in Mozilla Firefox by pressing Ctrl+Shift+K, or by going to Settings in the upper right corner (three dashes). Select Web Developer, then select Web Console.
- You can get to the JavaScript Development Console in Microsoft Edge by pressing F12, or by going to Settings in the upper right corner (three dots), select More Tools, then select Developer Tools.
If you use a different browser or operating system, you might access your JavaScript Development Console differently, but it’s usually not hard to find in the browser settings.
Examples
Once you have your JavaScript Development Console running, we can go over some examples to see how addEventListener works.
Example 1
In Example 1, we first use a JavaScript method called getElementsByTagName to set the constant body as a reference to the HTML BODY. This method allows us to use JavaScript to access the HTML BODY.
Next, we can add an event listener to the body constant with Javascript using the addEventListener method. This method takes two arguments. The first argument specifies what event to listen for, in this case, a click.
The second argument specifies a function to call when the event takes place. In this case, we use an anonymous function which tells console.log to print a notification that the event has taken place.
With the addEventListener method in place, each time we click the mouse, a message will appear in our JavaScript Development Console.
Example 2
One of the most significant advantages of using JavaScript event handlers over the old fashioned HTML inline event handlers like onclick is that there is also a removeEventListener method with JavaScript. There are plenty of occasions in which we want to add an event listener, but then need to remove it at a later time.
You might think that the removeEventListener syntax would look like it does in Example 2, but if you run the example in your JavaScript Development Console, you will see that you get an error. The error states that removeEventListener requires two arguments, so the syntax is the same as addEventListener.
Example 3
In Example 3, you can see that it appears that we have the syntax right. No errors appear when we run the code, but it still doesn’t work. It doesn’t work because the second argument must reference the listener that it intends to remove.
Example 4
If we want to add an event listener and then remove it at a later time, we will need to set up our addEventListener slightly differently. This time, instead of using an anonymous function as our second argument to the addEventLister, we will use a standard named function. In this example, we’ll call this function bodyClickHandler. This function will do the work of using console.log to print the notification in our JavaScript Development Console that a click event has taken place.
Example 5
In Example 5, we use the removeEventListener method correctly. This time when a click event occurs, removeEventListener will remove the function bodyClickHandler which effectively eliminates the listener, and no clicks will generate a message.
Conclusion
These examples have demonstrated a simple piece of code that can do some powerful things. There are plenty of other events, besides clicking, that you can add listeners for, which can help make your application or website very dynamic. When using addEventListener to your code you can use an anonymous function to help make your code a little more precise and readable, but if you want to remove the listener after an event has occurred, you will need to use a named function for the second parameter.
If you have found these addEvenListener examples helpful, please share them on Facebook and Twitter.