What’s the difference between Event Handlers & addEventListener in JS?

The difference is subtle but essential to know.

Photo by Vadim Misyuchenko on Unsplash

Events!

An important way of making your website actually “do stuff”.

MDN defines an Event as:

“The Event interface represents an event which takes place in the DOM.”

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired.

For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.

In this article, I’ll talk about the two ways of handling events and which method you should use depending on your situation.

The two ways of handling JavaScript Events

As of today, there are two ways to handle events in JavaScript:

1. By using an event handler
2. By adding an event listener

So what do these look like?

Method 1 — An Event Handler

An event handler can be recognized by the JavaScript using an “EventHandler”…