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.