Как обрабатываются события keydown и keyup в jQuery

минута на чтение

Для одного проекта для учёбы мне нужно было обрабатывать события нажатия кнопок на вебсайте. Простейший пример, как это можно реализовать с помощью JavaScript, а именно библиотеки jQuery, рассмотрим в этом посту.

В коде ниже при загрузке страницы к ней прикрепляются функции для обработки нажатия кнопки пробела (код 32). Когда пользователь нажимает на кнопку (событие «keydown») в консоле выдаётся строка «down», а когда он её отпускает (событие «keyup») выводится «up». Была ли нажата кнопка, мы сохраняем в переменной «globalKeyPressed», чтобы при нажатии кнопки в консоле строка выводилась только один раз, в противном случае она будет выводиться постоянно, пока кнопка нажата. Чтобы предотвратить действие по умолчанию, нужно вызвать метод события «preventDefault()».

var globalKeyPressed = false;

$(function() {
    // 32 = пробел
    $(document).on("keydown", function(e) {
        var code = e.keyCode;
        if(code == 32 && !globalKeyPressed) {
            console.log("down");
            e.preventDefault();
            globalKeyPressed = true;
        }
    });

    $(document).on("keyup", function(e) {
        var code = e.keyCode;
        if(code == 32 && globalKeyPressed) {
            console.log("up");
            e.preventDefault();
            globalKeyPressed = false;
        }
    });
});
Понравился пост? Поделись в соцсетях и подписывайся на аккаунты в Twitter и Facebook!
Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

Похожие записи:

Во многих системах управления контентом встроена jQuery, свободная библиотека для манипуляции элементами DOM, для управления событиями и асинхронными запросами (AJAX), в других нет. И даже в тех, в которых библиотека подключена, порой непонятно, загружена ли о...
За последнее время библиотека jQuery зарекомендовала себя как простой, но мощный инструмент для управления страницами сайтов и их трансформации во всех существующих браузерах. Данная библиотека преследует две основные цели: упрощение манипулирования элементами...
Сегодня поговорим о том, как проверить количество знаков в статье, правописание, уникальность при написании статьи. Проверка количества знаков в статье. Многие новички еще не знают, как проверять и какое количество знаков нужно для оптимизации статьи на сайте....