Event object basics in JavaScript

In this lesson, we will learn the basics of working with the Event object. This object contains information about the event that occurred. For example, if an element was clicked, we can find out the coordinates of this click, whether the Ctrl, Alt or Shift key was pressed at the time of the click etc.

Let's see how to get the Event object. Let's have a button:

<button id="elem">text</button>

Let some function be executed by clicking on this button:

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

elem.addEventListener('click', function() {

});

There is already a Event object inside the bound function - we just don't know how to retrieve it yet. It retrieves as follows: when declaring our function, we need to pass any variable into it as a parameter (as a rule, event - but the name can be anything) and the browser will automatically put the Event object into this variable:

elem.addEventListener('click', function(event) {
	console.log(event); // shows the object with the event
});

Perform the described actions yourself and output the object with the event to the console. Study the structure of this object.