Attaching handlers to elements in JavaScript

Let's now teach our DOM elements to respond to site user actions. For example, the user clicks somewhere with the mouse, and our code in response will have to process this click and display some information on the screen.

User actions that we can track through JavaScript are called events. Events can be the following: a mouse click on a page element, mouse hover over a page element, or vice versa - the mouse cursor leaves the element, and so on. In addition, there are events that do not depend on user actions, for example, an event when an HTML page is loaded into the browser.

For example, let's make a button, by clicking on which some text will be displayed on the screen as an alert. Let's start with the HTML code for the button:

<input id="button" type="submit">

Now we get a reference to the button into a variable:

let button = document.querySelector('#button');

Now we need to set the reaction of our button when it is clicked. To do this, JavaScript has a special method addEventListener, which takes the name of the event as the first parameter (clicking on the button is called 'click'), and the second parameter is a callback function that is executed when this event occurs.

Let's, for example, by clicking on the button display some text:

button.addEventListener('click', function() { console.log('!!!'); });

Given 3 buttons:

<input id="button1" type="submit"> <input id="button2" type="submit"> <input id="button3" type="submit">

Make it so that clicking on the first button displays the number 1, clicking on the second button displays the number 2, and clicking on the third button displays the number 3.