Breaking down Event Handlers and Event Listeners

Hello again! Today I wanted to go over a fairly simple topic, but one that gets discussed a lot. It may be because the two things can almost be used interchangeably but also because people often confuse them for each other. I’m talking about event handlers and event listeners in JavaScript.

I wanted to go ahead and share with you all the main difference between event handlers and event listeners in Javascript. In Javascript, an event can be a button click, or simply a mouse hover, and it is important that our program responds to that specific event by doing the appropriate thing. That could be making the font of the text slightly bigger with a mouse hover, or a complete change of the page with the click of the mouse on a dedicated button.

In this blog, you will learn the two ways to handle events and add them to your script. With Javascript, this is handled in two different ways. I bet you can guess the two? That’s right, it’s handlers and listeners! To explain this best I think it’s easiest to show specific examples. Let’s look at the example of using the onclick event. The onclick event occurs when the user clicks on an element that has been defined in your HTML. Let’s go ahead and do that.

The first thing that we need to do is create a button and then add the class btn. The class is what we will be referencing in our script file so we can tie the listener to the correct element.

Next, let’s go ahead and jump over to our index.js file. First, we need to go ahead and create a button variable which we’ve done on line 1. We will use the document.querySelector to get the class of the button that we’ve defined in our HTML as btn.

Next, we’re going to use the button variable and we are going to use the onclick event handler. Now, remember the onclick attribute will run when a mouse clicks on the element the handler is attached to. Lastly, let’s go ahead and return the console.log. Now when we go ahead and click the button the onclick event handler is triggered and we can see the output in the terminal.

Nice, we got it firing! So that’s an event handler in a nutshell. Fairly simple concept.

With this next example, we’re gonna use event listeners which are the other option for handling events. Listeners are directly assigned to an object, just like handlers, and they “listen” for events and get triggered when an event occurs. Things it will be listening for could be; mousedown, mouseup, click, dblclick, mousemove, mouseover, mousewheel, mouseout, and many others. Each one means its own thing of course. Here are some common examples and definitions of the events below:

Now that we’ve gone over what a listener is, let’s take a look at an example. First, we are going to simply repeat the previous example by assigning an event listener to a button to listen for specific events. In this instance, we are going to assign it to look for the ‘click’ event. In our code, we are going to change the onclick to addEventListener and then we’re going to ask it to look for the click event.

Once we have done that we can click on the button and notice in our terminal the console.log is returning the correct string, just as it did with the event handler. Perfect!

Now comes the difference between the two. You can only have one event handler for a specific event type but you can have multiple event listeners for that same event. Let’s take a look at what happens when you add two onclick event handlers to the same object.

As you can see the first onclick handler is completely ignored and a single click will only result in the second handler firing.

Now if we use addEventListener we get a different result. Let’s repeat this same thing but we are going to use event listeners.

As you can see from above, when we click the button you can see in the console, the program has triggered multiple event listeners of the same event, and we can see that with the two separate outputs.

So there you have it! A brief breakdown of the syntax and uses of both event handlers and event listeners. Now the key difference to remember between them is that a single element can only have one handler attached to it, however, that same element can have multiple listeners. So that brings us to our final question, which method should you use? The answer is like a lot of things in the program and that is it will depend on a case by case basis.

If you only ever want to attach a single type of event to an element, feel free to use an event handler. Now if you need to attach more than one event to an element or you may need to in the future, then adding a listener to the element is going to be needed. For the most part, using addEventListener is going to be the way to go most of the time. Hopefully, that was helpful for some, or a simple refresher for others! Happy Coding Everyone.