JavaScript is an event-driven programming language, this is why the event is an essential part of JavaScript. In this article, you will learn what is an event, what are even handlers, and most importantly what is an eventlistener and what is an addEventListener() method.
What is an event?
An event is an action that a user or even a browser can take on a website – an event is an action that happens to HTML elements. It can be a click, a hover, a press on a button to play media, a scroll on the page, when a webpage finishes loading, when some HTML input field is changed, and so on. Normally, JavaScript is used on HTML pages, so it also reacts to these actions or events.
Events play a crucial role because they cause a dynamical change of HTML elements of a webpage. When a user clicks a button, a click event occurred. When he presses on a button to play media, a play event has happened or when she scrolls the page, a scroll event occurred, and when the user writes something in a search field, a search event happened. When your browser finishes loading a document, a load event occurred.
All these are events that happen to HTML elements. There are many more events than we listed here – you can easily find a complete list of events online.
At this point let’s also mention that events are used in combination with functions. However, these functions are not executed before the event happens, such as when a user scrolls the page. Some events appear only once or even never, and some happen many times. But the problem is, you might not know the event happened. For this reason, we need an event handler to recognize the event has happened.
What is an event handler?
When a user clicks, you will need an event handler to recognize when the event occured. Most of these events that are driven by a user happen on the fly, you cannot predict or know when or even whether these events will happen at all. Event handlers will help you recognize whether and when these events happened. Obviously, you will need a tiny piece of code to make this happen, and JavaScript gives an event handler in a form of an addEventListener() method.
So, when you wish to monitor a specific event (or more of them), you can attach a handler to a particular element. One element can have more than one handler attached, as a matter of fact, you can add any number of event handlers to a single element without overwriting existing event handlers.
What is a JavaScript listener aka addEventListener?
We already said you can add many event handlers to one element, you can even add many event handlers of the same type to one element. One important thing to notice here – you can add event listeners to HTML elements, but also to any DOM object, not only HTML elements. The addEventListener() method makes it easier to control functions that should be called when a specific event happens, for example, when a user scrolls a page or clicks on a button.
An event listener – an addEventListener() method in JavaScript is a built-in function, a procedure that listens (waits) for an event to happen, and a second argument to be called whenever the described event gets fired.
Practical examples of how we can use the JavaScript addEventListener() method
The JavaScript addEventListener() method allows you to set up functions. These function(s) are called when a specific event happens, such as when a user clicks a button. In the following few examples, we will show you how you can implement addEventListener() in your code.
But first, let’s start with an addEventListener() Syntax:
element.addEventListener(event, function, useCapture)
An element represents the HTML element or any element that is a part of a DOM tree that you wish to add your event handler to.
An event defines the name of the event. We’ve already mentioned a few of them – a click, a scroll, a load event. You can find a full list of HTML DOM events online.
A function defines what will happen when JavaScript detects a specified event. We call a specific function of your choice when an event (click, scroll, load, …) happens. This is exactly what causes web pages to change dynamically.
useCapture parameter is optional. It’s a boolean value, so true or false. By default, it is set to false (bubbling phase). That means that the innermost HTML event handler is executed first. So, useCapture parameter defines whether the event is executed in the capturing or bubbling phase. For example, when we deal with nested HTML elements (for example, an img within a div) with attached event handlers, this boolean value determines which event will get executed first. First, let’s clarify what is event bubbling or event capturing, we’re sure the picture will get clearer when you understand this. So, there are two ways of defining the element order when an event occurs in the HTML DOM aka event propagation – bubbling and capturing. We used an example of <img> within a <div> above, so when a user clicks on the <img> element, which element’s “click” event should JavaScript handle first?
When we’re dealing with event bubbling, the inner most element’s event is handled first and then the outer: the <img> element’s click event is handled first, then the <div> element’s click event.
When we’re dealing with event capturing, the outer most element’s event is handled first and then the inner: the <div> element’s click event is handled first, then the <ing> element’s click event.
As already said, when we use the default value (false), JavaScript will use the bubbling propagation (the inner most element’s event is handled first and then the outer), and when the value is set to true, the event uses the capturing propagation (the outer most element’s event is handled first and then the inner).
How to add an event handler to an element?
This example will show you how to alert “Greetings!” when the user on your page clicks on an element:
See the Pen
by Tanja (@tanjatod)
on CodePen.
This is a snippet of a JavaScript addEventListener for our example – an element is a button, the event is a click, and our function alerts “Greetings!” when user clicks on a button:
element.addEventListener("click", function(){ alert("Greetings!"); });We can do it differently too – we can simply mention an external function, and the result will be the same as above:
See the Pen
How to add an event handler to an element with external function? by Tanja (@tanjatod)
on CodePen.
This is a snippet of a JavaScript addEventListener for our example with external greetingFunction. As you can see we have to define the function outside the addEventListener, and the geetingFunction will alert “Greetings!”:
element.addEventListener("click", greetingFunction);
function greetingFunction() {
alert ("Greetings!");
}What if I want to add many event handlers to the same element?
Yes, you can do this too. We already said the addEventListener() method allows you to add many events to the same element and you won’t overwrite the existing events. The code below will fire greetingFuntion and afterward secondGreetingFunction and then thirdGreetingFunction when the user clicks on a button.
See the Pen
How to use the addEventListener() method to add three click events to the same button by Tanja (@tanjatod)
on CodePen.
We defined “press” to be the button the user clicks on with a help of a variable:
press.addEventListener("click", greetingFunction);
press.addEventListener("click", secondGreetingFunction);
press.addEventListener("click", thirdGreetingFunction);What if I want to add different types of events to the same element?
Yes, you can do this too. The code below says that when the user mouses over the button, functions used by the addEventListener() method will let us know it happened. And the same happens if he clicks on that same button or if she mouses out.
See the Pen
apply addEventListener for different types of events to the same element by Tanja (@tanjatod)
on CodePen.
var a = document.getElementById("myButton");
a.addEventListener("mouseover", mouseoverFunction);
a.addEventListener("click", clickFunction);
a.addEventListener("mouseout", mouseoutFunction);
How to pass a parameter value with addEventListener() method
When you want to pass parameter values, you can use an anonymous function that calls the specified function with the parameters:
See the Pen
how to pass a parameter with addEventListener by Tanja (@tanjatod)
on CodePen.
The snippet of an example above:
element.addEventListener("click", function(){ myCalculation(parameter1, parameter2); });What if I want to remove event handlers that have been attached with the addEventListener() method?
Yes, you can do this too, and for that purpose use the removeEventListener() method. In the example below, the removeEventListener() method removes event handlers that have been attached with the addEventListener() method – we will remove the greetingFucntion when user clicks on an element:
element.removeEventListener("click", greetingFunction);