Interactive online courses HTML Academy
2026-03-09 14:05 Diff
https://htmlacademy.org/courses/javascript-browser/events/add-handler

We have a button that should cause a popup to appear when it is clicked. The plan is this: we need to catch the moment when the user clicks on the button. When this happens, we will add the modal--show class so that the window appears on the page.

The action “Catch the moment when the user clicks the button” has various names: add a click event handler for the button. Next, for the sake of simplicity, we can omit the word “event” and say this: Add a click handler for the button.

What does adding a handler mean? In order to determine the moment when an event occurs on the page, such as a button click in our case, we add a handler to the button that will be triggered when a click occurs.

Let’s take a look at the syntax for adding a handler.

var button = document.querySelector('.button'); button.addEventListener('click', function () { // Instructions });

The addEventListener() function says that we are adding an event handler to the element. Literally speaking, “we are adding an event listener.” The handler “hears” everything that happens on the page, and it will certainly register the event that we need when it occurs. That is, it will do this if we configure it correctly.

Next, we will analyze the syntax of event handlers and their settings in detail, but for the moment we will find a button that will cause the popup to open when it is clicked. This is a button with the button-open class. Add a handler to this button in a way similar to the example above.