01:05
Урок 12: События

Курс по программированию на JavaScript

Урок 12: События

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

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

Для обработки событий в JavaScript используется метод addEventListener, который позволяет назначать функции-обработчики для различных событий.

// Пример использования addEventListener
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
 alert('Button clicked!');
});
// При нажатии на кнопку с id "myButton" появится alert с сообщением "Button clicked!"

Метод addEventListener принимает два аргумента: название события и функцию-обработчик, которая будет вызвана при возникновении этого события.

Основные события

Рассмотрим несколько основных событий в JavaScript.

click

Событие click возникает при нажатии на элемент.

// Обработка события click
let button = document.getElementById('myButton');
button.addEventListener('click', function() {
 console.log('Button was clicked');
});
// При нажатии на кнопку с id "myButton" в консоль будет выведено сообщение "Button was clicked"

load

Событие load возникает при полной загрузке страницы.

// Обработка события load
window.addEventListener('load', function() {
 console.log('Page is fully loaded');
});
// После полной загрузки страницы в консоль будет выведено сообщение "Page is fully loaded"

input

Событие input возникает при изменении значения элемента ввода.

// Обработка события input
let inputField = document.getElementById('myInput');
inputField.addEventListener('input', function(event) {
 console.log('Input value:', event.target.value);
});
// При изменении значения элемента ввода с id "myInput" в консоль будет выведено текущее значение этого элемента

Примеры использования событий

Рассмотрим несколько примеров обработки событий в различных ситуациях.

// Пример 1: Изменение текста элемента при клике
let button = document.getElementById('changeTextButton');
button.addEventListener('click', function() {
 let textElement = document.getElementById('textElement');
 textElement.textContent = 'Текст изменен!';
});

// Пример 2: Изменение стиля элемента при наведении
let hoverElement = document.getElementById('hoverElement');
hoverElement.addEventListener('mouseover', function() {
 hoverElement.style.backgroundColor = 'lightblue';
});
hoverElement.addEventListener('mouseout', function() {
 hoverElement.style.backgroundColor = '';
});
// При нажатии на кнопку с id "changeTextButton" текст элемента с id "textElement" изменится на "Текст изменен!"
// При наведении на элемент с id "hoverElement" его фон изменится на светло-голубой, а при уходе мыши вернется к исходному

Упражнения

Упражнение 1: Изменение изображения при клике

Создайте кнопку и элемент img. При нажатии на кнопку измените источник изображения (src) на новое. Используйте JavaScript для реализации этой функциональности.

Решение:

// HTML


// JavaScript
let changeImageButton = document.getElementById('changeImageButton');
let myImage = document.getElementById('myImage');

changeImageButton.addEventListener('click', function() {
 myImage.src = 'image2.jpg';
});
// При нажатии на кнопку "Изменить изображение" источник изображения "myImage" изменится на "image2.jpg"

Объяснение: Мы создали кнопку и элемент img с уникальными идентификаторами. В JavaScript добавили обработчик событий для кнопки, который изменяет значение атрибута src изображения.

Упражнение 2: Валидация поля ввода

Создайте поле ввода и кнопку. При нажатии на кнопку проверьте, заполнено ли поле ввода. Если поле пустое, отобразите сообщение об ошибке. Если поле заполнено, отобразите введенное значение. Используйте JavaScript для реализации этой функциональности.

Решение:

// HTML


// JavaScript
let inputField = document.getElementById('inputField');
let validateButton = document.getElementById('validateButton');
let message = document.getElementById('message');

validateButton.addEventListener('click', function() {
 if (inputField.value === '') {
 message.textContent = 'Поле ввода не должно быть пустым';
 message.style.color = 'red';
 } else {
 message.textContent = `Вы ввели: ${inputField.value}`;
 message.style.color = 'green';
 }
});
// При нажатии на кнопку "Проверить" будет проверено значение поля ввода.
// Если поле пустое, отобразится сообщение "Поле ввода не должно быть пустым" красного цвета.
// Если поле заполнено, отобразится сообщение "Вы ввели: [введенное значение]" зеленого цвета.

Объяснение: Мы создали поле ввода, кнопку и элемент p для отображения сообщения. В JavaScript добавили обработчик событий для кнопки, который проверяет значение поля ввода и выводит соответствующее сообщение.

Категория: JavaScript | Просмотров: 8 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: