«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на 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-ю кнопку, обработчик удаляет её со страницы.

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 4
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки