Введение в события JavaScript

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

Что такое событие?

Представьте, что вы на вечеринке (конечно, это coding вечеринка!). Каждый раз, когда что-то происходит - кто-то arrives, начинается игра, или кто-то проливает напиток - это событие. В мире JavaScript, события работают аналогичным образом. Это вещи, которые происходят на вашей веб-странице, которые JavaScript может обнаружить и реагировать на них.

События могут быть вызваны:

• Действиями пользователя (нажатие кнопки, передвижение мыши)
• Действиями браузера (завершение загрузки страницы)
• Изменениями состояния элементов на странице

Вот простой пример для проиллюстрирования этой концепции:

<button id="myButton">Нажми меня!</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Кнопка нажата!");
});
</script>

В этом примере, нажатие кнопки (событие) вызывает появление окна с сообщением (реакция). Это как сказать: "Эй JavaScript, когда кто-то нажимает эту кнопку, покажи это сообщение!"

Обработчики событий JavaScript

Теперь, когда мы понимаем, что такое события, давайте поговорим о том, как их обрабатывать. Обработчики событий - это функции JavaScript, которые выполняются при occurrence события. Они как охранники на нашей coding вечеринке, решающие, что происходит при каждом событии.

Существует несколько способов назначения обработчиков событий в JavaScript. Давайте рассмотрим их:

1. Внутренние обработчики событий

Это самый простой (но не всегда лучший) способ обработки событий:

<button onclick="alert('Привет, мир!')">Нажми меня</button>

Здесь обработчик события написан прямо в HTML. Когда кнопка нажата, появляется окно с сообщением. Хотя это легко понять, это обычно не рекомендуется для больших приложений, так как оно смешивает HTML и JavaScript.

2. Обработчики событий через свойства

Лучший подход - разделить ваш JavaScript от вашего HTML:

<button id="myButton">Нажми меня</button>

<script>
document.getElementById("myButton").onclick = function() {
alert("Привет от обработчика события через Свойство!");
};
</script>

Этот метод assigns функцию к свойству onclick элемента кнопки. Это чище, но у него есть ограничение: вы можете назначить только один обработчик на одно событие этим способом.

3. Метод addEventListener()

Это самый гибкий и мощный способ обработки событий:

<button id="myButton">Нажми меня</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Привет от addEventListener!");
});
</script>

С помощью addEventListener() вы можете:

• Присоединить несколько обработчиков событий к одному элементу
• Легко удалить обработчики событий при необходимости
• Иметь больше контроля над временем активации listener в жизненном цикле события

Давайте рассмотрим более сложный пример:

<button id="myButton">Нажми меня</button>

<script>
let button = document.getElementById("myButton");

function changeColor() {
this.style.backgroundColor = "red";
}

function addBorder() {
this.style.border = "2px solid blue";
}

button.addEventListener("click", changeColor);
button.addEventListener("click", addBorder);
</script>

В этом примере, нажатие на кнопку изменяет её цвет на красный И добавляет синюю рамку. Два обработчика для одного события!

Объект Event JavaScript

Когда происходит событие, JavaScript creates объект Event. Этот объект содержит информацию о событии, например, где оно произошло, какой тип события это было, и иногда дополнительную информацию, специфичную для этого типа события.

Давайте рассмотрим пример:

<button id="myButton">Нажми меня</button>

<script>
document.getElementById("myButton").addEventListener("click", function(event) {
console.log("Тип события: " + event.type);
console.log("Целевой элемент: " + event.target.tagName);
console.log("Позиция мыши по X: " + event.clientX);
console.log("Позиция мыши по Y: " + event.clientY);
});
</script>

Когда вы нажимаете на кнопку, этот скрипт логирует информацию о событии клика, включая:

• Тип события ("click")
• Элемент, который был нажат (элемент "BUTTON")
• X и Y координаты мыши в момент клика

Эта информация может быть incredibly полезна для создания интерактивных и responsive веб-приложений.

Вот таблица, резюмирующая некоторые из часто используемых свойств объекта Event:

Свойство	Описание
type	Тип события (например, "click", "mouseover")
target	Элемент, который инициировал событие
clientX, clientY	Горизонтальные и вертикальные координаты мыши
keyCode	Код клавиши, нажатой (для событий клавиатуры)
preventDefault()	Метод для предотвращения стандартного действия события
stopPropagation()	Метод для предотвращения further传播 события по DOM-дереву

Помните, что разные типы событий могут иметь дополнительные специфические свойства. Всегда проверяйте документацию для полного списка свойств, доступных для каждого типа события.

В заключение, события являются heartbeat интерактивных веб-приложений. Они позволяют вашему JavaScript реагировать на действия пользователей и создавать динамичные, engage experiences. По мере вашего продолжения путешествия в JavaScript, вы будете все больше и больше работать с событиями. Принимайте их, экспериментируйте с ними, и смотрите, как ваши веб-страницы оживают!

Счастливого кодирования, будущие ninja JavaScript! ??

Credits: Image by storyset