Базовый курс JavaScript 16) window, event

В прогрессе

Урок 16 из 25

В прогрессе

← Previous

16) window, event

window

window — это глобальный объект в JavaScript, представляющий окно браузера и предоставляющий доступ ко многим функциям и свойствам, связанным с браузером и пользовательским интерфейсом. window — корневой объект в контексте клиентского JavaScript, на нём основаны многие другие объекты и функции. Вот основные аспекты window:

Основные свойства

window.document — предоставляет доступ к DOM-дереву текущей страницы, что позволяет манипулировать содержимым страницы (например, добавлять/удалять элементы, изменять текст и стили).
window.location — объект, содержащий URL текущей страницы. Позволяет получить или установить различные компоненты URL, включая протокол, хост, путь и параметры запроса.
window.navigator — содержит информацию о браузере пользователя, такой как версия, язык, операционная система и другие данные, связанные с устройством.
window.history — предоставляет методы для навигации по истории браузера, такие как back(), forward() и go().
window.screen — предоставляет информацию о характеристиках экрана устройства, таких как ширина, высота и разрешение экрана.

Основные методы

window.alert() — выводит модальное окно с сообщением. Прерывает выполнение скрипта, пока пользователь не закроет окно.
window.confirm() — выводит окно с подтверждением, возвращает true или false в зависимости от выбора пользователя (OK или Cancel).
window.prompt() — выводит окно с полем ввода, позволяя пользователю ввести текст, который затем возвращается скрипту.
window.open() — открывает новое окно или вкладку с указанным URL.
window.setTimeout() и window.setInterval() — методы для выполнения функций с задержкой или с периодическим интервалом.
window.clearTimeout() и window.clearInterval() — останавливают выполнение таймеров, установленных с помощью setTimeout или setInterval.

События окна

window.onload — вызывается, когда загрузка страницы завершена.
window.onresize — вызывается, когда окно браузера изменяет размер.
window.onscroll — вызывается при прокрутке страницы.
window.onbeforeunload — вызывается, когда пользователь собирается покинуть страницу, что позволяет предупредить его о несохранённых данных.

Некоторые дополнительные аспекты

Глобальные переменные и функции: все глобальные переменные и функции в JavaScript становятся свойствами и методами window.
Работа с iframe: window.frames позволяет работать с iframe элементами на странице, обращаясь к их window объектам.

window — это мощный объект, который позволяет взаимодействовать с браузером и пользователем. Он делает возможными многие элементы веб-интерфейсов и обеспечивают контроль над веб-страницей.

event

В JavaScript event — это объект, представляющий событие, которое происходит в браузере. События могут быть вызваны пользователем (например, кликом, вводом текста), а также программно или системой. event позволяет нам получать информацию о событии и управлять его поведением.

Основные свойства и методы объекта `event`

Свойства event
- event.type — возвращает тип события (например, "click", "keydown", "submit").
- event.target — элемент, на котором событие произошло, то есть целевой элемент, инициировавший событие.
- event.currentTarget — элемент, на котором установлен обработчик события (это может быть родительский элемент при всплытии).
- event.bubbles — логическое значение, указывающее, поддерживает ли событие всплытие. Возвращает true или false.
- event.cancelable — показывает, можно ли отменить действие события.
- event.defaultPrevented — возвращает true, если вызван метод preventDefault(), который отменяет стандартное поведение браузера.
- event.timestamp — возвращает время, когда событие было вызвано.
Методы event
- event.preventDefault() — отменяет стандартное поведение браузера для события. Например, если используется в событии отправки формы, то отправка формы будет отменена.
- event.stopPropagation() — останавливает дальнейшее распространение события (не позволяет ему всплыть или погружаться).
- event.stopImmediatePropagation() — полностью останавливает обработку события, включая другие обработчики, которые могли бы быть вызваны на этом элементе.

Типы событий

JavaScript поддерживает множество типов событий, включая:

События мыши:
- click — событие клика мыши.
- dblclick — двойной клик.
- mousedown и mouseup — нажатие и отпускание кнопки мыши.
- mousemove — движение курсора мыши.
- mouseenter и mouseleave — наведение и уход курсора с элемента.
- contextmenu — событие открытия контекстного меню (обычно правый клик).
События клавиатуры:
- keydown — нажатие клавиши.
- keyup — отпускание клавиши.
- keypress — удержание клавиши (устаревшее, не рекомендуется к использованию).
События для форм:
- submit — отправка формы.
- change — изменение значения в поле.
- input — ввод данных в поле (срабатывает при каждом изменении текста).
- focus и blur — фокусировка на элементе и потеря фокуса.
События окна и документа:
- load — завершение загрузки страницы.
- resize — изменение размера окна.
- scroll — прокрутка страницы или элемента.
- beforeunload — событие перед закрытием или перезагрузкой страницы.
События сенсора (Touch Events) — для сенсорных устройств:
- touchstart — касание экрана.
- touchmove — перемещение пальца по экрану.
- touchend — прекращение касания.

Вот несколько примеров работы с объектом event в JavaScript для различных сценариев и типов событий.

1. Обработка событий мыши

Пример: `click` и `dblclick`

				
					const button = document.getElementById("myButton");

// Обработка клика
button.addEventListener("click", (event) => {
  console.log("Кнопка нажата один раз");
  console.log("Тип события:", event.type); // Выведет "click"
});

// Обработка двойного клика
button.addEventListener("dblclick", (event) => {
  console.log("Кнопка нажата дважды");
  console.log("Тип события:", event.type); // Выведет "dblclick"
});

2. Обработка событий клавиатуры

Пример: `keydown` и `keyup`

				
					document.addEventListener("keydown", (event) => {
  console.log("Нажата клавиша:", event.key);
});

document.addEventListener("keyup", (event) => {
  console.log("Клавиша отпущена:", event.key);
});

3. Обработка событий для формы

				
					const form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // Отменяет отправку формы
  console.log("Форма не была отправлена, потому что preventDefault вызван");
});

4. Делегирование событий

Если у нас много одинаковых элементов, мы можем навешивать обработчик событий на их родителя, чтобы не дублировать код.

Пример: Делегирование события `click`

				
					<ul id="list">
  <li class="item">Элемент 1</li>
  <li class="item">Элемент 2</li>
  <li class="item">Элемент 3</li>
</ul>

				
					const list = document.getElementById("list");

list.addEventListener("click", (event) => {
  if (event.target.classList.contains("item")) {
    console.log("Клик по элементу списка:", event.target.textContent);
  }
});

5. Координаты мыши в событии `mousemove`

Пример: Отслеживание положения курсора

				
					document.addEventListener("mousemove", (event) => {
  console.log(`Позиция курсора: X=${event.clientX}, Y=${event.clientY}`);
});

6. События фокусировки и потери фокуса

Пример: `focus` и `blur`

				
					<input type="text" id="nameInput" placeholder="Введите ваше имя">

				
					const nameInput = document.getElementById("nameInput");

nameInput.addEventListener("focus", () => {
  console.log("Поле ввода в фокусе");
});

nameInput.addEventListener("blur", () => {
  console.log("Поле ввода потеряло фокус");
});

7. События загрузки страницы

Пример: `DOMContentLoaded` и `load`

				
					// Событие `DOMContentLoaded` срабатывает, когда DOM полностью загружен
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM полностью загружен и готов к работе");
});

// Событие `load` срабатывает, когда все ресурсы, включая изображения, загружены
window.addEventListener("load", () => {
  console.log("Вся страница и ресурсы полностью загружены");
});

8. Событие `scroll`

Пример: Отслеживание прокрутки страницы

				
					window.addEventListener("scroll", () => {
  console.log("Текущая позиция прокрутки:", window.scrollY);
});

9. Прерывание всплытия события `stopPropagation`

Пример: Остановка всплытия события

				
					const outerDiv = document.getElementById("outerDiv");
const innerDiv = document.getElementById("innerDiv");

outerDiv.addEventListener("click", () => {
  console.log("Клик по внешнему элементу");
});

innerDiv.addEventListener("click", (event) => {
  event.stopPropagation(); // Остановка всплытия
  console.log("Клик по внутреннему элементу");
});

IGS

IGS

Базовый курс JavaScript

16) window, event

window

Основные свойства

Основные методы

События окна

Некоторые дополнительные аспекты

event

Основные свойства и методы объекта `event`

Типы событий

Вот несколько примеров работы с объектом event в JavaScript для различных сценариев и типов событий.

1. Обработка событий мыши

Пример: `click` и `dblclick`

2. Обработка событий клавиатуры

Пример: `keydown` и `keyup`

3. Обработка событий для формы

4. Делегирование событий

Пример: Делегирование события `click`

5. Координаты мыши в событии `mousemove`

Пример: Отслеживание положения курсора

6. События фокусировки и потери фокуса

Пример: `focus` и `blur`

7. События загрузки страницы

Пример: `DOMContentLoaded` и `load`

8. Событие `scroll`

Пример: Отслеживание прокрутки страницы

9. Прерывание всплытия события `stopPropagation`

Пример: Остановка всплытия события

Базовый курс JavaScript

16) window, event

window

Основные свойства

Основные методы

События окна

Некоторые дополнительные аспекты

event

Основные свойства и методы объекта event

Типы событий

Вот несколько примеров работы с объектом event в JavaScript для различных сценариев и типов событий.

1. Обработка событий мыши

Пример: click и dblclick

2. Обработка событий клавиатуры

Пример: keydown и keyup

3. Обработка событий для формы

4. Делегирование событий

Пример: Делегирование события click

5. Координаты мыши в событии mousemove

Пример: Отслеживание положения курсора

6. События фокусировки и потери фокуса

Пример: focus и blur

7. События загрузки страницы

Пример: DOMContentLoaded и load

8. Событие scroll

Пример: Отслеживание прокрутки страницы

9. Прерывание всплытия события stopPropagation

Пример: Остановка всплытия события

Основные свойства и методы объекта `event`

Пример: `click` и `dblclick`

Пример: `keydown` и `keyup`

Пример: Делегирование события `click`

5. Координаты мыши в событии `mousemove`

Пример: `focus` и `blur`

Пример: `DOMContentLoaded` и `load`

8. Событие `scroll`

9. Прерывание всплытия события `stopPropagation`