JavaScript - Window/Document Events

Здравствуйте, будущие кодеры! Сегодня мы окунемся в захватывающий мир событий JavaScript, конкретно focusing на событиях Window и Document. Как ваш доброжелательный соседский компьютерный учитель, я здесь, чтобы провести вас через это путешествие с множеством примеров и объяснений. Так что возьмите любимый напиток, устроитесь поудобнее, и давайте начнем!

Window Events

События Window — это действия, occurring в relation к самому браузерному окну. Эти события могут быть incredibly полезны для создания динамичных и responsive веб-приложений. Давайте рассмотрим некоторые из самых common оконных событий:

1. load

Событие load срабатывает, когда вся страница, включая все зависимые ресурсы, такие как стили и изображения, полностью загрузилась. Это часто используется для того, чтобы убедиться, что все элементы доступны перед выполнением скриптов.

window.addEventListener('load', function() {
console.log("Page is fully loaded!");
});

В этом примере мы добавляем обработчик событий к объекту window. Когда событие 'load' occurs, наша функция будет выполнена, и сообщение будет записано в консоль.

2. resize

Событие resize срабатывает каждый раз, когда изменяется размер браузерного окна. Это может быть полезно для ajusting макетов или перерасчета размеров.

window.addEventListener('resize', function() {
console.log("Window resized to: " + window.innerWidth + "x" + window.innerHeight);
});

Здесь мы записываем новые размеры окна каждый раз, когда оно изменяется в размере. Это может быть полезно для ajustments в адаптивном дизайне.

3. scroll

Событие scroll срабатывает, когда пользователь прокручивает окно. Это можно использовать для реализации бесконечной прокрутки или показа/скрытия элементов в зависимости от положения прокрутки.

window.addEventListener('scroll', function() {
let scrollPosition = window.scrollY;
console.log("Scrolled to position: " + scrollPosition);

if (scrollPosition > 300) {
document.getElementById('backToTop').style.display = 'block';
} else {
document.getElementById('backToTop').style.display = 'none';
}
});

В этом примере мы показываем кнопку 'Back to Top', когда пользователь прокрутил более 300 пикселей вниз по странице.

4. unload

Событие unload срабатывает, когда пользователь уходит с страницы. Это можно использовать для выполнения задач по очистке или prompt пользователя перед уходом.

window.addEventListener('unload', function(event) {
event.preventDefault();
event.returnValue = '';
});

Этот код вызовет confirmational диалог, когда пользователь пытается покинуть страницу. Помните, используйте это осторожно, так как это может быть irritational для пользователей!

Document Events

События Document связаны с самим HTML-документом. Эти события позволяют нам interact с содержимым страницы различными способами. Давайте рассмотрим некоторые ключевые события документа:

1. DOMContentLoaded

Событие DOMContentLoaded срабатывает, когда начальный HTML-документ полностью загружен и проанализирован, не дожидаясь загрузки внешних ресурсов.

document.addEventListener('DOMContentLoaded', function() {
console.log("DOM is ready!");
document.getElementById('myButton').addEventListener('click', function() {
alert("Button clicked!");
});
});

Это событие часто предпочитается window.load,因为它 не ждет загрузки изображений и других ресурсов, что позволяет быстрее выполнять скрипты.

2. click

Событие click срабатывает, когда элемент clicked. Это одно из самых common событий, с которыми вы будете работать.

document.getElementById('myButton').addEventListener('click', function(event) {
console.log("Button clicked at coordinates: " + event.clientX + ", " + event.clientY);
event.target.style.backgroundColor = 'red';
});

В этом примере мы записываем координаты клика и изменяем цвет кнопки при нажатии.

3. keydown и keyup

Эти события срабатывают при нажатии (keydown) или отпускании (keyup) клавиши.

document.addEventListener('keydown', function(event) {
console.log("Key pressed: " + event.key);
if (event.key === 'Enter') {
document.getElementById('submitButton').click();
}
});

Этот код записывает каждое нажатие клавиши и имитирует клик по кнопке submit при нажатии клавиши Enter.

4. mouseover и mouseout

Эти события срабатывают, когда указатель мыши enters (mouseover) или leaves (mouseout) элемент.

let hoverElement = document.getElementById('hoverMe');

hoverElement.addEventListener('mouseover', function() {
this.style.backgroundColor = 'yellow';
});

hoverElement.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

Это создает простой эффект hover, изменяя цвет фона элемента при наведении курсора.

Event Methods Table

Вот удобная таблица, summariizing методы, которые мы обсуждали:

Event	Description	Example
load	Срабатывает, когда страница полностью загружена	window.addEventListener('load', function() {...})
resize	Срабатывает, когда изменяется размер окна	window.addEventListener('resize', function() {...})
scroll	Срабатывает, когда прокручивается окно	window.addEventListener('scroll', function() {...})
unload	Срабатывает при уходе с страницы	window.addEventListener('unload', function(event) {...})
DOMContentLoaded	Срабатывает, когда DOM готов	document.addEventListener('DOMContentLoaded', function() {...})
click	Срабатывает при нажатии на элемент	element.addEventListener('click', function(event) {...})
keydown	Срабатывает при нажатии клавиши	document.addEventListener('keydown', function(event) {...})
keyup	Срабатывает при отпускании клавиши	document.addEventListener('keyup', function(event) {...})
mouseover	Срабатывает, когда указатель мыши enters элемент	element.addEventListener('mouseover', function() {...})
mouseout	Срабатывает, когда указатель мыши leaves элемент	element.addEventListener('mouseout', function() {...})

И вот и все,朋友们! Мы рассмотрели основы оконных и документных событий в JavaScript. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими событиями в своих проектах. Before вы узнаете, вы будете создавать интерактивные и динамичные веб-страницы, как профессионал!

Счастливо кодить, и пусть ваши события всегда срабатывают так, как вы expected!

Credits: Image by storyset