Далее на странице...
Иногда необходимо получить данные об элементе, с которым происходит взаимодействие. Например, узнать какое событие произошло, что это вообще за элемент или какие координаты он имеет.
Для этого существует специальный объект Event (в перевод. "событие"). Объект Event дает широкие возможности для обработки событий.
Объект Event - Объект события
Как и любой другой объект в JavaScript, объект Event имеет свойства.
HTML-код
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Объект Event</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<button id="btn">Нажми меня</button>
<button >Нажми меня</button>
<button>Нажми меня</button>
<a href="https://www.youtube.com/">https://www.youtube.com/</a>
<script src="script.js"></script>
</body>
</html>
Объект Event или "Объект-Событие" передается как аргумент в callback-функцию. Он является первым аргументом и может носить любое название.
Обычно аргумент так и называют event или сокращенно e. Хотя название не играет роли.
Если в callback-функцию нужно передать еще аргументы, то они всегда следуют после аргумента event.
Рассмотрим пример и увидим, что содержит объект Event.
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.addEventListener('mouseenter', (e) => {
console.log(e);
});
Результат в Браузере
Результат в консоли
MouseEvent {isTrusted: true, screenX: 131, screenY: 157, clientX: 91, clientY: 56, …}
altKey: false
bubbles: false
button: 0
buttons: 0
cancelBubble: false
cancelable: false
.
.
.
target: button#btn
timeStamp: 4852.0999999940395
toElement: button#btn
type: "mouseenter"
view: Window {window: Window, self: Window, document: document, name: "", location: Location, …}
which: 0
x: 91
y: 56
__proto__: MouseEvent
При переходе по ссылке из поля "Результат в Браузере" нужно открыть консоль и навести указатель мыши на 1-ю кнопку.
В результате в консоли мы увидим объект MouseEvent, который предоставляет данные об элементе, с которым происходит взаимодействие. При этом, например, указывается что это за элемент (см. строку 14) или событие, в результате которого сработал обработчик (см. свойство type - строка 15).
Свойство target объекта Event
Свойство target объекта Event позволяет получить доступ к элементу страницы с которым происходило взаимодействие/для которого было назначено событие.
Это дает возможность продолжить работать с элементом: изменить его стилевое оформление или, например, удалить.
JavaScript-код
'use strict';
// Получаем доступ к первой кнопке
const btn = document.querySelector('button');
btn.addEventListener('mouseenter', (e) => {
e.target.remove();
});
Результат в Браузере
Теперь при наведении указателя на 1-ю кнопку, обработчик удаляет её со страницы.
