Прежде чем приступить к прочтению данной главы, стоит определиться, что же из себя представляют события web-страницы. Так вот, события – это любые действия пользователя, будь то ввод данных с клавиатуры, проматывание страницы или передвижения мышки, и, конечно же, «клики».
А ещё существуют события, создаваемые скриптами, и их обработчики – триггеры и хэндлеры, но о них чуть позже.
jQuery работает практически со всеми событиями в JavaScript, приведу список самых востребованных с небольшими пояснениями:
| событие | описание |
|---|---|
click | клик по элементу; порядок событий: mousedown → mouseup → click |
dblclick | двойной щелчок мышки |
mousedown | нажатие клавиши мыши |
mouseup | отжатие клавиши мыши |
mousemove | движение курсора |
mouseenter | наведение курсора на элемент; не срабатывает при переходе фокуса на дочерние элементы |
mouseleave | вывод курсора из элемента; не срабатывает при переходе фокуса на дочерние элементы |
mouseover | наведение курсора на элемент |
mouseout | вывод курсора из элемента |
{% embed url="https://anton.shevchuk.name/book/code/events.mouse.html" %}
Идём дальше. Вот ещё десяток событий, по большей части они относятся лишь к элементам форм:
| событие | описание |
|---|---|
focus | получение фокуса на элементе; актуально для input[type=text], но в современных браузерах работает и с другими элементами |
blur | фокус ушёл с элемента; срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab'у) |
focusin | фокус на элементе; данное событие аналогично focus, но при этом умеет «всплывать» |
focusout | фокус ушёл с элемента; данное событие аналогично blur, «всплывает» (подробнее про различия вы можете прочитать в статье «Фокусировка: focus/blur») |
{% hint style="info" %} Вплоть до 4-ой версии jQuery, порядок событий был следующим:
focusoutblurfocusinfocus
С jQuery версии 4.0 порядок событий будет соответствовать текущей спецификации W3C:
blurfocusoutfocusfocusin
Единственным браузером, который имеет иной порядок остаётся IE, но ирония заключается в том, что IE в своё время был единственным браузером, который следовал предыдущей спецификации W3C, а все остальные браузеры использовали свой порядок событий, который вот только в 2023-м году стал стандартом ¯\_(ツ)_/¯ {% endhint %}
| событие | описание |
|---|---|
change | изменение значения элемента (значение при потере фокуса отличается от начального значения при получении фокуса) |
keydown | нажатие клавиши на клавиатуре |
keypress | удержание клавиши на клавиатуре, последовательность keydown → keypress → keyup (только для буковок-циферок) |
keyup | отжатие клавиши на клавиатуре |
select | выбор текста для input[type=text] и textarea |
submit | отправка формы |
{% embed url="https://anton.shevchuk.name/book/code/events.form.html" %}
Так же стоит упомянуть ещё парочку популярных событий с которыми доводится работать:
| событие | описание |
|---|---|
resize | изменение размеров документа |
scroll | прокрутка элемента или окна |
{% hint style="info" %} Нет нужды запоминать все события — вы всегда найдёте их на страницах MDN от Mozilla. {% endhint %}