30% События

Прежде чем приступить к прочтению данной главы, стоит определиться, что же из себя представляют события web-страницы. Так вот, события – это любые действия пользователя, будь то ввод данных с клавиатуры, проматывание страницы или передвижения мышки, и, конечно же, «клики».

А ещё существуют события, создаваемые скриптами, и их обработчики – триггеры и хэндлеры, но о них чуть позже.

jQuery работает практически со всеми событиями в JavaScript, приведу список самых востребованных с небольшими пояснениями:

click	клик по элементу; порядок событий: mousedown → mouseup → click
dblclick	двойной щелчок мышки
mousedown	нажатие клавиши мыши
mouseup	отжатие клавиши мыши
mousemove	движение курсора
mouseenter	наведение курсора на элемент; не срабатывает при переходе фокуса на дочерние элементы
mouseleave	вывод курсора из элемента; не срабатывает при переходе фокуса на дочерние элементы
mouseover	наведение курсора на элемент
mouseout	вывод курсора из элемента

Мышиные события

---

Идём дальше. Вот ещё десяток событий, по большей части они относятся лишь к элементам форм:

focus	получение фокуса на элементе; актуально для input[type=text], но в современных браузерах работает и с другими элементами
blur	фокус ушёл с элемента; срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab'у)
focusin	фокус на элементе; данное событие аналогично focus, но при этом умеет «всплывать»
focusout	фокус ушёл с элемента; данное событие аналогично blur, «всплывает» (подробнее про различия вы можете прочитать в статье «Фокусировка: focus/blur»)

Вплоть до 4-ой версии jQuery, порядок событий был следующим:

• focusout

• blur

• focusin

• focus

С jQuery версии 4.0 порядок событий будет соответствовать текущей спецификации W3C:

• blur

• focusout

• focus

• focusin

Единственным браузером, который имеет иной порядок остаётся IE, но ирония заключается в том, что IE в своё время был единственным браузером, который следовал предыдущей спецификации W3C, а все остальные браузеры использовали свой порядок событий, который вот только в 2023-м году стал стандартом ¯\_(ツ)_/¯

change	изменение значения элемента (значение при потере фокуса отличается от начального значения при получении фокуса)
keydown	нажатие клавиши на клавиатуре
keypress	удержание клавиши на клавиатуре, последовательность keydown → keypress → keyup (только для буковок-циферок)
keyup	отжатие клавиши на клавиатуре
select	выбор текста для input[type=text] и textarea
submit	отправка формы

События формы

---

Так же стоит упомянуть ещё парочку популярных событий с которыми доводится работать:

resize	изменение размеров документа
scroll	прокрутка элемента или окна

Нет нужды запоминать все события — вы всегда найдёте их на страницах MDN от Mozilla.