3.12. События jQuery

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

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

Управление веб-страницей с помощью событий jQuery

• Содержание:
• 1. События мыши
• 2. События документа/окна
• 3. События форм
• 4. События клавиатуры
• 5. События jQuery
• 6. Объект события

1. События мыши

.click()
Это событие запускается, когда вы нажимаете и отпускаете кнопку мыши. Применяется к ссылкам, картинкам, кнопкам, абзацам, блокам и т.д.

.dblclick()
Событие запускается, когда вы дважды нажимаете и отпускаете кнопку мыши, например, открываете какую-нибудь папку на рабочем столе.

.mousedown()
Событие происходит во время нажатия кнопки мыши, например, при перетаскивании элементов.

.mousemove()
Событие запускается, когда вы передвигаете указатель мыши по странице.

.mouseout()
Событие запускается, когда вы уводите указатель мыши с элемента.

.mouseover()
Событие запускается, когда вы проводите указателем мыши по элементу (аналогично использованию псевдокласса :hover).

.mouseup()
Событие активизируется, когда вы отпускаете кнопку мыши.

2. События документа/окна

.load()
Событие запускается, когда браузер загрузит все файлы веб-страницы: html-файлы, внешние css и javascript файлы, медиа-файлы. Это может быть неудобно в случае если веб-страница содержит большое количество файлов. Для решения данной проблемы можно воспользоваться функцией ready(), которая запускает скрипты сразу после загрузки html-кода.

.resize()
Событие запускается, когда вы изменяете размер окна браузера.

.scroll()
Событие запускается, когда вы используете полосы прокрутки, либо прокручиваете веб-страницу с помощью колесика мыши, или же используете для этих целей клавиши клавиатуры (pg up, pg dn, home, end).

.unload()
Событие запускается, когда вы собираетесь покинуть страницу, щелкая по ссылке для перехода на другую страницу, закрываете вкладку страницы или же окно браузера.

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

.blur()
Событие запускается, когда поле формы выводится из фокуса, т.е. вы ввели данные в поле формы и перешли на другое.

.change()
Событие запускается при изменении статуса поля формы, например при выбора пункта из выпадающего меню.

.focus()
Событие запускается при переходе в поле формы, щелкая в нем кнопкой мыши или клавишей табуляции.

.reset()
Событие позволяет вернуть форму в первоначальное состояние, отменив сделанные изменения.

.select()
Событие запускается, когда вы выделяете текст внутри текстового поля формы.

.submit()
Событие запускается, когда вы отправляете заполненную форму с помощью щелчка по кнопке «Отправить» или нажатия клавиши «Enter», когда курсор помещен в текстовом поле.

4. События клавиатуры

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

.keypress()
Событие запускается, когда вы нажимаете на клавишу, до тех пор, пока вы не отпустите клавишу.

.keyup()
Событие запускается, когда вы отпускаете клавишу.

5. События jQuery

.hover()
Данная функция работает как событие, позволяя одновременно решить две задачи, связанные с событием наведения указателя мыши и событием снятия указателя мыши в отношении выбранного объекта. Основная структура функции:
$('#селектор').hover(функция1, функция2);

.toggle()
Событие работает аналогично событию hover(), с разницей в том, что событие запускается от щелчка кнопкой мыши. Например, можно открыть выпадающее меню одним щелчком и скрыть вторым.

6. Объект события

При запуске события браузер сохраняет информацию о нём в объекте события. Объект события содержит данные, собранные в момент, когда событие произошло. Обработка события происходит с помощью функции, при этом объект передается функции как аргумент — переменная evt (в качестве имени переменной можно использовать также event или просто e). Чтобы получить доступ к аргументу, необходимо добавить к функции имя параметра. В пределах данной функции можно получить доступ к различным свойствам, используя точечный синтаксис. Когда функция вызывается, то объект события сохраняется в переменной evt.
Объект события имеет различные свойства, наиболее распространённые из них описаны в нижеприведенной таблице.