«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript


Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


Иногда необходимо получить данные об элементе, с которым происходит взаимодействие. Например, узнать какое событие произошло, что это вообще за элемент или какие координаты он имеет.

Для этого существует специальный объект 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-ю кнопку, обработчик удаляет её со страницы.



Читайте также...



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 4
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

Тематические публикации
Популярные заметки
Последние заметки