События клавиатуры и мыши
Обрабатывайте щелчки, нажатия клавиш и события указателя.
«События клавиатуры и мыши» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.
Группы событий ввода
События мыши и клавиатуры позволяют создавать насыщенное взаимодействие. У каждой группы есть специализированные типы событий и свойства.
Событие щелчка
click срабатывает при обычном нажатии с последующим отпусканием. Оно также срабатывает при активации кнопок и ссылок с клавиатуры, благодаря чему интерфейс остаётся доступным.
btn.addEventListener("click", () => {
console.log("activated");
});Двойной щелчок и контекстное меню
dblclick срабатывает при двойном щелчке, а contextmenu — при щелчке правой кнопкой мыши (его часто отменяют, чтобы показать собственное меню).
el.addEventListener("dblclick", () => console.log("double"));
el.addEventListener("contextmenu", (e) => e.preventDefault());Нажатие, отпускание и перемещение мыши
Они обеспечивают точный контроль: нажатие, отпускание и перемещение. Это базовые элементы для взаимодействий с перетаскиванием.
box.addEventListener("mousedown", () => console.log("down"));
box.addEventListener("mouseup", () => console.log("up"));Вход курсора и наведение
mouseenter не всплывает и не учитывает границы дочерних элементов, тогда как mouseover всплывает и срабатывает при переходе на дочерние элементы. Для обработки наведения обычно используется mouseenter.
el.addEventListener("mouseenter", () => el.classList.add("hover"));
el.addEventListener("mouseleave", () => el.classList.remove("hover"));Какая кнопка мыши
Свойство button показывает, какая кнопка вызвала событие: 0 — левая, 1 — средняя, 2 — правая.
el.addEventListener("mousedown", (e) => {
if (e.button === 2) console.log("right button");
});Нажатие и отпускание клавиш
keydown срабатывает при нажатии клавиши (и повторяется, пока клавиша удерживается), а keyup — при отпускании. Событие keypress устарело.
input.addEventListener("keydown", (e) => {
console.log("down: " + e.key);
});event.key
e.key — это логическое значение клавиши: символ, например "a", или название, например "Enter", "Escape" или "ArrowUp".
input.addEventListener("keydown", (e) => {
if (e.key === "Escape") console.log("cancel");
});event.code
e.code — это физическое расположение клавиши (например, "KeyA" или "Space"), не зависящее от раскладки клавиатуры. Используйте его для управления в играх.
window.addEventListener("keydown", (e) => {
if (e.code === "Space") console.log("jump");
});Сочетания клавиш
Сочетайте флаги модификаторов с key, чтобы распознавать сочетания клавиш, и вызывайте preventDefault, чтобы переопределить стандартное поведение браузера.
document.addEventListener("keydown", (e) => {
if (e.ctrlKey && e.key === "s") {
e.preventDefault();
console.log("save");
}
});Повтор для удерживаемых клавиш
e.repeat имеет значение true, когда keydown срабатывает из-за удерживания клавиши, поэтому Вы можете игнорировать автоматические повторы.
window.addEventListener("keydown", (e) => {
if (e.repeat) return;
console.log("first press of " + e.key);
});Быстрая проверка
Выберите свойство, не зависящее от раскладки.
Итоги
К событиям мыши относятся click, dblclick, mousedown/mouseup/mousemove, а также удобные для обработки наведения mouseenter/mouseleave; свойство button определяет нажатую кнопку. В событиях клавиатуры используются keydown/keyup: e.key содержит символ или название клавиши, e.code — физическую клавишу, а e.repeat показывает её удержание.
Часто задаваемые вопросы
Урок «События клавиатуры и мыши» бесплатный?
Да — полный текст урока «События клавиатуры и мыши» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «События клавиатуры и мыши»?
Обрабатывайте щелчки, нажатия клавиш и события указателя. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать JavaScript Academy?
Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «События клавиатуры и мыши»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке JavaScript Academy?
Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы addEventListener
- Объект события
- preventDefault и stopPropagation
- События клавиатуры и мыши