30% События
Last updated
Last updated
Прежде чем приступить к прочтению данной главы, стоит определиться, что же из себя представляют события web-страницы. Так вот, события – это любые действия пользователя, будь то ввод данных с клавиатуры, проматывание страницы или передвижения мышки, и, конечно же, «клики».
А ещё существуют события, создаваемые скриптами, и их обработчики – триггеры и хэндлеры, но о них чуть позже.
jQuery работает практически со всеми событиями в JavaScript, приведу список самых востребованных с небольшими пояснениями:
click
клик по элементу;
порядок событий: mousedown → mouseup → click
dblclick
двойной щелчок мышки
mousedown
нажатие клавиши мыши
mouseup
отжатие клавиши мыши
mousemove
движение курсора
mouseenter
наведение курсора на элемент; не срабатывает при переходе фокуса на дочерние элементы
mouseleave
вывод курсора из элемента; не срабатывает при переходе фокуса на дочерние элементы
mouseover
наведение курсора на элемент
mouseout
вывод курсора из элемента
Идём дальше. Вот ещё десяток событий, по большей части они относятся лишь к элементам форм:
focus
получение фокуса на элементе;
актуально для input[type=text], но в современных браузерах работает и с другими элементами
blur
фокус ушёл с элемента; срабатывает при клике по другому элементу на странице или по событию клавиатуры (к примеру переключение по tab'у)
focusin
фокус на элементе;
данное событие аналогично focus, но при этом умеет «всплывать»
focusout
Вплоть до 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.
фокус ушёл с элемента;
данное событие аналогично blur, «всплывает» (подробнее про различия вы можете прочитать в статье «»)