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»)

change — изменение значения элемента (значение при потере фокуса отличается от начального значения при получении фокуса)

keydown — нажатие клавиши на клавиатуре

keypress — удержание клавиши на клавиатуре, последовательность «keydown → keypress → keyup» (только для буковок-циферок)

keyup — отжатие клавиши на клавиатуре

select — выбор текста для «input[type=text]» и «textarea»

submit — отправка формы

Вдогонку наглядный пример:

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

resize — изменение размеров документа

scroll — прокрутка элемента или окна

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