Intro to JavaScript’s addEventListener()

In JavaScript, one of the most important and interesting things you will do is add event listeners to elements on a web page. They are what make a web page more dynamic and interesting to a user. When I click on something, something pops up. When I submit a form, I get a response. These can all be caused by event listeners in JavaScript, and they are fundamental to what makes a good website.

The way to add an event listener to an element of a page is to first choose an html element to add it to then call the addEventListener() method on the target element with the syntax:

targetElement.addEventListener(type, listener [, useCapture])
targetElement.addEventListener(type, listener [, options])

Both type and listener are required parameters for the event listener to work properly, the third is optional. The type is a case-sensitive string for the type of event, such as “click”, “submit”, or “keypress”, among many others. There is a full list of JavaScript events here.

The listener parameter is most commonly a function that handle’s what happens when the event is triggered. This can be either a callback function:

targetElement.addEventListener("click", sayHello)
function sayHello() {
  alert("Hello World!")
}

An anonymous function:

targetElement.addEventListener("click", function() {
  alert("Hello World!")
})

Or an arrow function:

targetElement.addEventListener("click", () => alert("Hello World!"))

All of these will cause an alert of Hello World when the targetElement is clicked.

For the third optional parameter, one choice is useCapture. This is a boolean that specifies whether to use capture, and if there is no third parameter it will default to false. This is only really useful when you have elements with event listeners that are nested in other elements with event listeners that are listening for the same type of event. If useCapture is set to true this indicates that events of the given type will be sent to the given listener before being sent to any other event listener below it in the DOM tree.

As an example, lets say you have this html:

<div>
  <button type="button">Click Me!</button>
</div>

Then you add event listeners on both the button and the div that both listen for clicks:

document.querySelector("button").addEventListener("click", function() {
  alert("I'm the button!")
})
document.querySelector("div").addEventListener("click", function() {
  alert("I'm the div!")
})

Since these event listeners both have only two parameters, the useCapture is set to the default of false. So when you click the button the the alerts will fire off with I'm the button! then I’m the div!. But if you add true to the end of the event listener for the div the alerts will fire off in the opposite direction. This is because, by making the div’s useCapture true, you are saying that the div’s event listener should get precedence to go first over all the others in the DOM tree.

The other optional argument for addEventListener is options. Originally, useCapture was the only option for a third parameter. This options parameter came about because over time developers found that they wanted more options, but they didn’t want to increase the number of parameters to addEventListener. So options is an object with the optional keys of capture, once, and passive, each of which should have a boolean value that all default to false. The capture key works the same way as useCapture. The once key, when it is true, will cause the event listener to only fire off once. When the event listener has been invoked, the listener will be automatically removed. The passive key, when set to true, indicates that the listener function should not use preventDefault(). If the listener does use preventDefault(), it will generate a warning in the console.

Ultimately, one can gather from all of this that there are a variety of interesting thing a programmer can do with JavaScript events. Most of the time we only need to use the type and listener parameters to achieve everything we need from an event listener, But there are other options to change the default behavior. And it is good to know about these options because event listeners are so important in JavaScript.