События в jQuery

Дата: 08.11.2019 Категория: jQuery Комментарии: 0

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

jQuery расширяет базовые механизмы обработки событий JavaScript, предлагая методы для большинства собственных событий браузера, некоторые из этих методов: ready(), click(), keypress(), focus(), blur(), change() и т. д. Например, чтобы выполнить некоторый код JavaScript, когда DOM готов, вы можете использовать метод jQuery ready():

В общем, события можно разделить на четыре основные группы — события мыши, события клавиатуры, события форм и события документа/окна. Следующий раздел даст вам краткий обзор всех этих событий, а также связанных с ними методов jQuery.

События мыши

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

Метод клика click()

Метод jQuery click() задает функцию обработчика событий к выбранным элементам для события «click». Заданная функция выполняется, когда пользователь нажимает на этот элемент. В следующем примере элементы

будут скрыты на странице при их нажатии.

Метод двойного клика dblclick()

Метод jQuery dblclick() задает функцию-обработчик событий к выбранным элементам для события «dblclick» (двойной клик). Присоединенная функция выполняется, когда пользователь дважды щелкает этот элемент. В следующем примере элементы

будут скрыты при двойном щелчке.

Метод наведения мыши hover()

Метод jQuery hover() задает одну или две функции обработчика событий к выбранным элементам, которые выполняются, когда указатель мыши входит в зону элемента и покидает ее. Первая функция выполняется, когда пользователь помещает указатель мыши над элементом, тогда как вторая функция выполняется, когда пользователь уводит указатель мыши из этого элемента.

В следующем примере элементы

будут выделены при наведении на него курсора, а выделение будет удалено при удалении курсора.

Метод mouseenter()

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

при наведении на него курсора.

Метод mouseleave()

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

при удалении с него курсора.

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

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

Метод нажатия клавиши keypress()

Метод jQuery keypress() задает функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда браузер получает ввод с клавиатуры от пользователя. В следующем примере отобразится сообщение, когда событие kypress запускается и сколько раз оно запускается при нажатии клавиши на клавиатуре.

Метод нажатия клавиши keydown()

Метод jQuery keydown() задает функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь впервые нажимает клавишу на клавиатуре. В следующем примере будет отображаться сообщение о срабатывании события нажатия клавиш и о том, сколько раз оно срабатывает при нажатии клавиши на клавиатуре.

Метод keyup()

Метод jQuery keyup() задает функцию-обработчик событий к выбранным элементам (обычно элементам управления формы), которая выполняется, когда пользователь отпускает клавишу на клавиатуре. В следующем примере будет отображаться сообщение, когда событие keyup вызывается и сколько раз оно запускается при нажатии и отпускании клавиши на клавиатуре.

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

Событие формы вызывается, когда элемент управления формы получает или теряет фокус, или когда пользователь изменяет значение элемента управления формы, например, вводя текст в поле ввода текста, выбирает любой параметр в поле выбора и т.д. Вот некоторые часто используемые методы jQuery для обработки событий формы.

Метод изменения состояния change()

Метод jQuery change() задает функцию-обработчик события к элементам ,

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

Метод получения фокуса focus()

Метод jQuery focus() задает функцию-обработчик события к выбранным элементам (обычно это элементы управления и ссылки), которая выполняется, когда он получает фокус. В следующем примере отобразится сообщение, когда текстовый ввод получит фокус.

Метод размытия blur()

Метод jQuery blur() задает функцию-обработчик событий к элементам формы, таким как ,

, , которая выполняется, когда тот теряет фокус. В следующем примере будет отображаться сообщение, когда поле ввода текста теряет фокус.

Метод отправки данных формы submit()

Метод jQuery submit() задает функцию-обработчик событий к элементам

События в jQuery

В jQuery реализован свой механизм реагирования на события, возникающие на HTML странице.

Что такое события?

Все действия посетителей, на которые веб-страница может реагировать тем или иным способом, называются событиями.

Событие представляет тот самый момент, когда что-то происходит.

• передвижение курсора через элемент
• выбор радио кнопки
• нажатие на элемент

Обычно по отношению к событию говорят, что оно возникло.

В следующей таблице приведены некоторые общие события DOM:

События мыши	События клавиатуры	События формы	События документа/окна
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	blur	unload

Синтаксис jQuery для методов событий

В jQuery у большинства событий DOM есть эквивалентные методы jQuery.

Например, чтобы установить событие click (нажатие кнопки мыши) всем параграфам на странице, можно сделать следующее:

Следующий шаг — это определить, что будет происходить, когда событие возникнет. Для этого нужно передать в событие функцию:

Часто используемые методы событий jQuery

$(document).ready()

Метод $(document).ready() позволяет выполнять функцию, когда документ полностью загружен. Об этом событии рассказывалось в главе Синтаксис jQuery.

click()

Метод click() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда пользователь «кликает» мышкой на элемент HTML.

В следующем примере, когда возникает событие «нажатие кнопки мыши» на элементе

dblclick()

Метод dblclick() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда пользователь совершает двойное нажатие мышкой на элемент HTML:

mouseenter()

Метод mouseenter() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда указатель мыши заходит на элемент HTML:

mouseleave()

Метод mouseleave() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда указатель мыши выходит за границы элемента HTML:

mousedown()

Метод mousedown() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда нажата любая из стандартных клавиш мыши (левая, средняя или правая) на элементе HTML:

mouseup()

Метод mouseup() присоединяет функцию обработчика события к элементу HTML, которая выполняется, когда отпущена любая из стандартных клавиш мыши (левая, средняя или правая) на элементе HTML:

hover()

Метод hover() в параметрах принимает две функции и по сути является комбинацией методов mouseenter() и mouseleave().

Первая функция выполняется, когда указатель мыши заходит на элемент HTML, а вторая, когда указатель мыши покидает границы элемента HTML:

focus()

Метод focus() присоединяет функцию обработчика события к полю HTML формы. Функция выполняется, когда поле формы получает фокус:

Метод blur() присоединяет функцию обработчика события к полю HTML формы. Функция выполняется, когда поле формы теряет фокус:

Метод on()

Метод on() присоединяет один или несколько обработчиков событий к выбранному элементу.

Присоединяем событие «нажатие кнопки мыши» к элементу

3.12. События jQuery

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

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

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

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 .
Объект события имеет различные свойства, наиболее распространённые из них описаны в нижеприведенной таблице.

Рубрика: События jQuery

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

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

Список функций

События браузера

.error() — устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере).

.resize() — устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.

.scroll() — устанавливает обработчик «прокрутки» элементов документа, либо, запускает это событие.

Загрузка документа

.load() — устанавливает обработчик полной загрузки выбранных элементов (метод устарел с версии jQuery 1.8).

.ready() — устанавливает обработчик готовности дерева DOM.

.unload() — устанавливает обработчик выхода со страницы (при переходе по ссылке, закрытии браузера и.т.д.) для объекта window (метод устарел с версии jQuery 1.8).

Прикрепление обработчиков

.bind() — устанавливает обработчик события на выбранные элементы страницы. Обработчик не сработает на элементах, появившихся после его установки.

.delegate() — устанавливает обработчик события на элементы, соответствующие заданному селектору.

.on() — универсальный метод для установки обработчиков событий на выбранные элементы страницы.

.off() — удаляет с выбранных элементов страницы обработчики событий, установленные с помощью метода .on().

.one() — устанавливает обработчик события выбранным элементам страницы. Особенностью метода является то, что обработчик будет вызван не более одного раза, на каждом из элементов.

.trigger() — вызывает событие у выбранных элементов, что приводит к запуску обработчиков этого события.

.triggerHandler() — вызывает выполнение обработчиков заданного события у выбранных элементов. Cамо событие, при этом, не происходит.

.unbind() — метод необходим для удаления обработчиков событий, установленных на выбранных элементах методами bind(), one() или методами с узким назначением (click(), focus() и.т.д).

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

.keydown() — устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.

.keypress() — устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие.

.keyup() — устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.

События мыши

.click() — устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие.

.contextmenu() — устанавливает обработчик вызова контекстного меню на элементе («клик» правой кнопкой мыши).

.dblclick() — устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие.

.hover() — устанавливает обработчик(и) двух событий: mouseenter и mouseleave.

.mousedown() — устанавливает обработчик нажатия кнопки мыши на элементе, либо, запускает это событие.

.mouseenter() — устанавливает обработчик появления курсора над элементом, либо, запускает это событие.

.mouseleave() — устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.

.mousemove() — устанавливает обработчик движения курсора мыши внутри элемента, либо, запускает это событие.

.mouseout() — устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.

.mouseover() — устанавливает обработчик появления курсора над элементом, либо, запускает это событие.

.mouseup() — устанавливает обработчик возвращения кнопки мыши в ненажатое состояние, либо, запускает это событие.

.toggle() — поочередно выполняет одно из нескольких заданных действий.