Курс по программированию на 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('Мышь наведена на элемент');
});

// Мышь наведена на элемент

Упражнения

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

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

// Нажата клавиша: A (или другая нажатая клавиша)

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

// JavaScript
document.addEventListener('mousemove', function(event) {
 let mousePosition = document.getElementById('mousePosition');
 mousePosition.textContent = 'Позиция мыши: ' + event.clientX + ', ' + event.clientY;
});

// Позиция мыши: 150, 200 (или другая позиция)