jQuery click, hover, scroll, input и другие события с примерами

Пользователь, взаимодействуя с веб-страницей, совершает различные действия, тем самым вызывая события. После наступления любого события можно выполнить определенный код, задав нужное поведение системы. В этой статье мы разберем, как работать с событиями и их обработчиками, используя библиотеку jQuery. Мы рассмотрим события jQuery click, hover, scroll и другие. А также вы узнаете, как вызвать события программно с помощью метода jQuery trigger.

Содержание

Общий принцип обработки событий
Объект Event: получение информации о событии
Параметры обработчика событий
Несколько событий на одном элементе
События jQuery
jQuery события мыши
jQuery события клавиатуры
jQuery события элементов формы
jQuery событие прокрутки
jQuery событие изменения размеров окна браузера
jQuery события загрузки страницы
Вызов события программно
Как удалить обработчик события
Заключение

Общий принцип обработки событий

Событие в браузере — это оповещение о том, что что-то произошло в результате действия пользователя или системы. Например, клик на кнопке, ввод символов в текстовое поле, перемещение мыши, загрузка страницы и т. д.

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

Например, какой-либо кнопке можно задать код, который будет выполняться после нажатия на эту кнопку. На событие click (нажатия) кнопки ниже повешен обработчик, который выводит в браузере окно с сообщением. Поэтому при клике на эту кнопку вы увидите это сообщение:

Кликните

Таким образом, общий принцип обработки событий состоит в следующем:

Получить объект элемента страницы.
Указать тип события, которое собираемся обрабатывать, для этого элемента.
Повесить обработчик на это событие.

Чтобы выбрать элемент с помощью библиотеки jQuery, нужно воспользоваться селектором jQuery:

// Получим элемент кнопки с классом someBtn
$('.someBtn')

Затем с помощью метода on привязываем элементу обработчик на конкретное событие. Метод on принимает в качестве параметров строку с названием события (click) и функцию-обработчик:

$('.someBtn').on('click', function() {
    // Код обработчика выполнится после нажатия на кнопку
});

Также в jQuery есть альтернативный и более простой вариант этого кода. Вместо метода on, можно воспользоваться методом с названием, идентичным названию события. В нашем случае — это click. Метод события принимает в качестве параметра функцию-обработчик:

$('.someBtn').click(function() {
    // Код обработчика выполнится после нажатия на кнопку
});

Объект Event: получение информации о событии

В теле обработчика событий есть возможность получить доступ к различной информации о текущем событии. Эту информацию содержит объект jQuery Event, который передается в функцию-обработчик. Для доступа к этому объекту в jQuery используется аргумент event в обработчике событий:

$('.someBtn').click(function(event) {
    console.log(event); // объект Event
});

Объект jQuery Event содержит различные полезные свойства и методы для получения информации о событии. Например, мы можем узнать тип события, элемент, на котором произошло событие, координаты клика мыши и многое другое. Например, для кнопки можно получить следующие данные:

$('.someBtn').click(function(event) {
    console.log(event.type); // 'click'
    console.log(event.target); // <button class="someBtn">Click me</button>
    console.log(event.pageX); // координата X курсора мыши на странице
    console.log(event.pageY); // координата Y курсора мыши на странице
    console.log(event.which); // код нажатой клавиши
    console.log(event.altKey); // была ли зажата клавиша Alt при нажатии на кнопку
    console.log(event.ctrlKey); // была ли зажата клавиша Ctrl при нажатии на кнопку
    console.log(event.shiftKey); // была ли зажата клавиша Shift при нажатии на кнопку
    console.log(event.originalEvent); // оригинальное событие JavaScript, если это было jQuery-событие
    event.preventDefault(); // отменяем переход по ссылке, если это была ссылка
    event.stopPropagation(); // предотвращаем дальнейшее распространение события на родительские элементы
});

На практике часто бывает полезным использование методов preventDefault и stopPropagation.

Метод preventDefault используется для отмены действия по умолчанию, связанного с событием. Например, по умолчанию клик по ссылке приводит к переходу на указанный в ней адрес. Если мы не хотим, чтобы такой переход произошел, мы можем использовать метод preventDefault. Он отменяет действие по умолчанию, связанное с событием, и позволяет выполнить другие действия вместо этого. Например, мы хотим при клике вместо перехода по ссылке показывать всплывающее окно:

$('.someBtn').click(function(event) {
    e.preventDefault(); // отменяем переход по ссылке
    // показываем всплывающее окно
});

Метод stopPropagation применяется для остановки дальнейшего распространения события по DOM-дереву от самого элемента к его родителям. При срабатывании события на элементе, функции-обработчики выполняются сперва на самом элементе, затем на каждом его родителе. Если мы хотим, чтобы событие выполнилось только на текущем элементе, нужно использовать метод stopPropagation.

К примеру, у нас есть выпадающее меню категорий и вложенных в них ссылок на страницы товаров. При нажатии на элемент списка, представляющий категорию, вложенные элементы со ссылками должны выпадать или скрываться. В то же время клик на ссылку должен приводить к переходу на соответствующую страницу товара. Чтобы предотвратить вызов события клика на родительский элемент (категорию) при нажатии на ссылку, нужно применить stopPropagation:

$('.dropdown-menu a').on('click', function(event) {
    event.stopPropagation();
});

Параметры обработчика событий

В функцию-обработчик возможно передавать дополнительные данные через параметры обработчика. Для доступа к этим параметрам внутри обработчика можно использовать объект event:

// С методом on
$('.someBtn ').on('click', {param1: 'value1', param2: 'value2'}, function(event) {
    console.log(event.data.param1); // 'value1'
    console.log(event.data.param2); // 'value2'
}));

// С методом click
$('.someBtn').click({param1: 'value1', param2: 'value2'}, function(event) {
    console.log(event.data.param1); // 'value1'
    console.log(event.data.param2); // 'value2'
});

Несколько событий на одном элементе

Чтобы установить несколько событий на одном элементе, можно использовать следующие компактные записи:

$('#someBtn').on({
    click: function() {
      console.log('Клик!');
    },
    mouseenter: function() {
      console.log('Мышь вошла!');
    },
    mouseleave: function() {
      console.log('Мышь вышла!');
    }
});

$('#someBtn')
    .click(function() {
      console.log('Клик!');
    })
    .mouseenter(function() {
      console.log('Мышь вошла!');
    })
    .mouseleave(function() {
      console.log('Мышь вышла!');
    });
});

$('#someBtn').on('click mouseenter mouseleave', function(event) {
    console.log('Вызвано событие: ' + event.type);
});

События jQuery

В этом разделе мы рассмотрим различные события jQuery:

События мыши
События клавиатуры
События элементов формы
Событие прокрутки
Событие изменения размеров окна браузера
События загрузки страницы

jQuery события мыши

С помощью этих методов для работы с событиями мыши мы можем отслеживать различные действия пользователя, такие как клики, движения мыши, наведение курсора и многое другое. Продемонстрируем работу событий jQuery click, dblclick, mouseenter, mouseleave и contextmenu, повесив обработчики на один и тот же элемент:

$('.demoRect').click(function() {
    $(this).text('Кликнули один раз');
}).dblclick(function() {
    $(this).text('Кликнули два раза');
}).mouseenter(function() {
    $(this).text('Навели курсор');
}).mouseleave(function() {
    $(this).text('Убрали курсор');
}).contextmenu(function() {
    $(this).text('Вызвали контекстное меню');
});

Вы можете проверить работу обработчиков событий мыши на этом прямоугольнике:

Я с обработчиками

Метод jQuery hover является сокращенной формой для назначения обработчиков событий mouseenter и mouseleave. Этот метод принимает в качестве параметров две функции. Первая функция выполняется, когда курсор заходит на элемент, вторая — при выходе курсора за пределы элемента:

$('.someElement').hover(function() {
    $(this).addClass('highlight');
}, function() {
    $(this).removeClass('highlight');
});

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

Рассмотрим события, которые позволяют обрабатывать действия пользователя на клавиатуре.

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

$(document).on('keydown', function(event) {
    if (event.keyCode === 13) {
      console.log('Нажата клавиша Enter');
    }
});

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

$(document).on('keyup', function(event) {
    if (event.keyCode === 16) {
      console.log('Отпущена клавиша Shift');
    }
});

Событие keypress запускается при нажатии клавиши, которая может быть отображена на экране (буквы, цифры, знаки препинания и т. д.):

$(document).on('keypress', function(event) {
    if (event.keyCode === 65) {
      console.log('Нажата клавиша A');
    }
});

Так можно определить, какая клавиша нажата:

$(document).on('keypress', function(event) {
    const keyName = String.fromCharCode(event.which);
    console.log('Нажата клавиша ' + keyName);
});

Элемент ниже покажет ту клавишу, которую вы нажмете:

Нажмите на клавишу

jQuery события элементов формы

События формы могут использоваться для валидации форм, стилизации полей и других задач.

Событие submit возникает при отправке формы. Его можно использовать, например, для валидации полей:

$('form').on('submit', function(event) {
    if ($('.form-field__required').val() === '') {
      event.preventDefault();
      $('.form-error').text('Заполните обязательные поля');
    }
});

События change и input происходят при изменении значения элемента формы, например, при изменении текста в поле ввода. Эти события можно использовать для валидации данных. Отличие этих двух событий в том, что change срабатывает после завершения ввода и потери фокуса, в то время как input работает в реальном времени:

$('.form-email').on('change', function() {
    if (!/^[\w\-\.]+@([\w\-]+\.)+[\w\-]{2,}$/.test($(this).val())) {
      $('.form-error').text('Введите корректный адрес электронной почты!');
    }
});

Событие focus возникает, когда элемент формы получает фокус ввода, а событие blur – при потере фокуса. Эти события можно использовать, например, для выделения поля ввода, когда пользователь переходит к нему с помощью клавиши Tab:

$('.form-field').on('focus', function() {
    $(this).addClass('focused');
}).on('blur', function() {
    $(this).removeClass('focused');
});

В интерактивном примере ниже — простая форма с одним текстовым полем для ввода. В этом примере используются события submit, input, focus и blur. С помощью события input при вводе текста в поле отображается количество вводимых символов. Когда пользователь устанавливает фокус (focus) на текстовом поле, появляется сообщение о требуемом количестве символов для ввода. При потере фокуса (blur) сообщение удаляется. Если пользователь вводит от 10 символов и отправляет форму — появляется сообщение об успешной отправке. Иначе он увидит сообщение об ошибке отправки.

jQuery событие прокрутки

Событие jQuery scroll возникает, когда пользователь прокручивает страницу или элемент с помощью колеса мыши или полосы прокрутки. Это событие можно использовать, например, для получения текущей позиции прокрутки страницы:

$(window).scroll(function() {
    console.log("Текущая позиция страницы: " + $(this).scrollTop());
});

В элементе ниже отображается количество пикселей, прокрученных от верха страницы. Это реализовано с помощью события scroll:

jQuery событие изменения размеров окна браузера

Событие изменения окна браузера в jQuery можно обработать с помощью метода resize. Оно срабатывает при изменении размеров окна браузера:

$(window).resize(function() {
    const width = $(window).width();
    const height = $(window).height();
  
    console.log(width); // ширина окна  браузера
    console.log(height);  // высота окна  браузера
});

Если вы сейчас измените размер окна браузера, вы увидите новый размер в блоке ниже:

Измените размер окна браузера

jQuery события загрузки страницы

Выполнение некоторого JavaScript-кода, который взаимодействует со структурой DOM, требует полной загрузки страницы. Если запустить такой код, когда дерево DOM еще полностью не построено, могут возникнуть ошибки. Поэтому на практике такой js-код устанавливают в обработчике событий загрузки страницы. Рассмотрим эти события.

Когда DOM загружен и готов к использованию, происходит событие ready:

$(document).ready(function() {
    //код для выполнения после загрузки DOM
});

Если необходимо выполнить скрипт после загрузки всех ресурсов страницы, включая изображения и другие файлы, нужно воспользоваться событием load:

$(window).load(function() {
    //код для выполнения после загрузки всех ресурсов страницы
});

Вызов события программно

В JavaScript существует возможность вызвать событие на элементе из кода без необходимости производить над элементом реальное действие. Для вызова события программно используется метод jQuery trigger.

$(document).ready(function() {
    $('#someButton').on('click', function(event) {
      console.log('Кнопка была нажата');
      console.log('Координата X курсора мыши: ' + event.pageX);
      console.log('Координата Y курсора мыши: ' + event.pageY);
    });

    // вызываем событие click на кнопке через 2 секунды после загрузки страницы
    setTimeout(function() {
      $('#myButton').trigger({
        type: 'click',
        pageX: 100,
        pageY: 200
      });
    }, 2000);
});

В этом примере мы устанавливаем обработчик события click на кнопке, который выводит сообщение в консоль, включая координаты курсора мыши. Затем мы вызываем это событие программно через 2 секунды после загрузки страницы, передавая объект события с определенными значениями свойств pageX и pageY. Это позволяет нам имитировать клик мыши на кнопке с заданными координатами.

Как удалить обработчик события

Для удаления события jQuery используется метод off. Этот метод удаляет одно или несколько событий с элемента, к которому были прикреплены:

// Удаление одного события
$('#someElement').off('click');

// Удаление нескольких событий
$('#someElement').off('click mouseover');

Если есть необходимость удалить только конкретный обработчик события, который был назначен элементу, можно передать в метод off имя обработчика:

function someClickHandler() {
  console.log('Click!');
}

$('#someElement').on('click', myClickHandler);

// Удаление обработчика события click
$('#someElement').off('click', myClickHandler);

Если вы хотите удалить все события с элемента, нужно метод off без аргументов:

$('#someElement').off();

Заключение

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

Обработка событий с использованием jQuery