01:07
Урок 28: Обработка событий клавиатуры и мыши

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

Урок 28: Обработка событий клавиатуры и мыши

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

События клавиатуры

События клавиатуры срабатывают при нажатии клавиш на клавиатуре. Наиболее часто используемые события клавиатуры — это keydown и keyup.

Событие keydown

Событие keydown срабатывает, когда пользователь нажимает клавишу на клавиатуре.

// Обработка события keydown
document.addEventListener('keydown', function(event) {
 console.log('Клавиша нажата:', event.key);
});
// Клавиша нажата: A (или другая нажатая клавиша)

Событие keyup

Событие keyup срабатывает, когда пользователь отпускает клавишу на клавиатуре.

// Обработка события keyup
document.addEventListener('keyup', function(event) {
 console.log('Клавиша отпущена:', event.key);
});
// Клавиша отпущена: A (или другая отпущенная клавиша)

События мыши

События мыши срабатывают при взаимодействии пользователя с мышью. Наиболее часто используемые события мыши — это mousemove и mouseover.

Событие mousemove

Событие mousemove срабатывает при перемещении указателя мыши.

// Обработка события mousemove
document.addEventListener('mousemove', function(event) {
 console.log('Позиция мыши:', event.clientX, event.clientY);
});
// Позиция мыши: 150 200 (или другая позиция)

Событие mouseover

Событие mouseover срабатывает, когда указатель мыши перемещается на элемент.

// Обработка события mouseover
document.getElementById('hoverElement').addEventListener('mouseover', function() {
 console.log('Мышь наведена на элемент');
});
// Мышь наведена на элемент

Упражнения

Упражнение 1: Обработка события keydown

Создайте HTML-документ с элементом <div id="keyDisplay"></div>. Используйте событие keydown для отображения нажатой клавиши внутри элемента <div>.

Решение:

// HTML
<div id="keyDisplay"></div>

// JavaScript
document.addEventListener('keydown', function(event) {
 let keyDisplay = document.getElementById('keyDisplay');
 keyDisplay.textContent = 'Нажата клавиша: ' + event.key;
});
// Нажата клавиша: A (или другая нажатая клавиша)

Объяснение: Мы создали HTML-документ с элементом <div> и добавили обработчик события keydown, который отображает нажатую клавишу внутри элемента.

Упражнение 2: Обработка события mousemove

Создайте HTML-документ с элементом <div id="mousePosition"></div>. Используйте событие mousemove для отображения координат указателя мыши внутри элемента <div>.

Решение:

// HTML
<div id="mousePosition"></div>

// JavaScript
document.addEventListener('mousemove', function(event) {
 let mousePosition = document.getElementById('mousePosition');
 mousePosition.textContent = 'Позиция мыши: ' + event.clientX + ', ' + event.clientY;
});
// Позиция мыши: 150, 200 (или другая позиция)

Объяснение: Мы создали HTML-документ с элементом <div> и добавили обработчик события mousemove, который отображает координаты указателя мыши внутри элемента.

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