Jquery вызвать событие click

Содержание:

Материал из JQuery

eventType — тип вызываемого события. Например "click", "resize" и.т.д. (список всех событий см. ниже).
extraParameters — массив дополнительных данных, передаваемых в обработчик.

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

Надо отметить, что вызов события методом trigger() не полностью повторяет событие, произошедшее по естественным причинам. Например вызов события "click" применительно к ссылке, не приведет к переходу по ней.

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

О типах событий можно посмотреть в описании метода bind().

Передача дополнительных данных

Метод позволяет передавать дополнительные данные в обработчик, с помощью необязательного параметра extraParameters. Этот параметр должен быть задан массивом. В методе, эти данные будут доступны во втором, третьем и.т.д. параметрах (по одному дополнительному параметру на каждый элемент массива). Первый параметр, в любом обработчике событий занят объектом события.

Рассмотрим пример передачи дополнительных данных:

Отметим разницу между дополнительными данными, передаваемыми при установке обработчика событий (параметр eventData) и данными передаваемыми при вызове события методом trigger() (параметр extraParameters). Во-первых, есть смысловое отличие: eventData задается один раз для каждого обработчика, поэтому, при каждом вызове, он будет получать одно и то же значение. Параметр extraParameters задается для каждого отдельного вызова заново, и поэтому значения могут быть разными. Во-вторых, эти два вида данных доступны внутри обработчика различным способом:

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

Событие – это "реакция" браузера на действие пользователя. Например, когда пользователь на странице нажимает на кнопку, браузер в соответствии с ним генерирует событие (в данном случае click ). Более подробно узнать, как это происходит можно в статье JavaScript — Знакомство с событиями.

Для работы с событиями в сценариях JavaScript браузер предоставляет API (например, функцию addEventListener ). Используя эту функцию, вы можете указать код, который необходимо выполнить, когда браузер для указанного элемента будет генерировать указанное событие.

Обработка событий с помощью методов jQuery

Перед тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить. Узнать о том, как найти нужные элементы на странице можно в статье jQuery — Выбор элементов.

В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций on и one , а также кратких записей on .

Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.

Например, добавим с помощью функции on событие click для всех элементов с классом btn :

Вышеприведённый код, записанный с использованием короткой записи функции on :

Дополнительная информация о событии

При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.

Пространство имён

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

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

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

Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.

Передача дополнительных данных в обработчик

При необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции on ). Доступ к переданным данным внутри обработчика осуществляется через объект Event .

Читайте также:  Стиральная машина bosch где собирают

Осуществляется это так (пример):

Как повесить несколько событий на один элемент

Пример использования одного обработчика для нескольких (2 или более) событий:

Для каждого события своя функция:

Пример использования в jQuery несколько обработчиков (функций) на одно событие:

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

Программный вызов события

Для вызова события из кода в jQuery есть 2 метода:

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

jQuery — Событие загрузки страницы (ready)

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

Самая короткая запись события загрузки страницы в jQuery выглядит так:

Но, можно использовать и более длинную запись:

jQuery — Событие загрузки (load)

Событие load браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: image , script , iframe и window .

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

Например, выведем сообщение в консоль, когда указанное изображение будет загружено:

jQuery — События мыши

В jQuery для отслеживания действий мыши наиболее часто используют следующие события:

  • mousedown
  • mouseup
  • click
  • mousemove
  • wheel
  • hover
  • mouseenter
  • mouseover
  • mouseleave
  • mouseout

jQuery — Событие клик (click)

Событие click является сложным событием, оно возникает после генерирования событий mousedown и mouseup . Событие mousedown возникает, когда указатель находится над элементом и кнопка мыши нажата. Событие mouseup происходит, когда указатель находится над элементом и кнопка мыши отпущена. Событие click генерируется, когда курсор находится над элементом, и клавиша мыши нажата и отпущена. Эти события могут получать любые HTML элементы.

Например, повесим обработчик на событие onclick элемента window . При наступлении данного события обработчик будет выводить номер нажатой клавиши и координаты курсора:

Например, повесим событие onclick на все элементы с классом btn :

Краткая запись события по клику:

Например, разберем, как можно скрыть блок через некоторое время после события click :

jQuery — Событие при наведении (hover)

Событие при поднесении курсора является сложным и состоит из 2 событий:

  • вхождения (mouseenter, mouseover);
  • покидания (mouseleave, mouseout).

События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.

Например, изменим цвет элемента списка при поднесении к нему курсора:

Те же самые действия, но использованиям mouseover и mouseout :

Данные методы необязательно использовать вместе, их можно также применять по отдельности.

Например, подсчитаем количество посещений элемента при наступлении события "Навести мышью":

Вместо использования mouseenter и mouseleave можно использовать событие hover .

Например, перепишем вышеприведённый пример, используя hover :

При использовании события hover в jQuery, первый обработчик используется для задания действий при вхождении курсора в элемент ( mouseenter ), а второй — при покидании ( mouseleave ).

Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.

jQuery — Событие движения мыши

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

jQuery — Событие колёсика мыши (wheel)

Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:

Данное событие в отличие от scroll генерируется браузером только для колёсика мышки, при этом неважно прокручивается элемент или нет, т.е. с ним можно работать на элементах с overflow , равным hidden . Еще одно отличие заключается в том, что wheel генерируется до прокрутки, а scroll — после неё.

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

При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:

  • keydown (клавиша нажата, но ещё не отпущена);
  • keypress (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события keydown и keyup позволяют узнать только о коде клавиши, но не символа);
  • keyup (генерируется браузером при отпускании клавиши).

Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:

Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:

Читайте также:  Где хранятся скачанные треки яндекс музыка

Пример, как можно прослушать сочетание клавиш Ctrl+Enter :

Пример, с использованием событий keydown и keyup :

jQuery – События элементов формы

В jQuery можно выделить следующие события для элементов формы и не только:

  • focus (focusin)
  • blur (focusout)
  • change
  • input (для текстовых элементов формы)
  • select
  • submit

jQuery — События получения и потери фокуса

Событие focus посылается элементу, когда он получает фокус. Данное событие генерируется для элементов input , select и ссылок ( a href=". " ), а также любых других элементов, у которых установлено свойство tabindex . Получение элементом фокуса обычно осуществляется посредством клика или нажатия клавиши Tab на клавиатуре. Событие focus не всплывает.

Кроме focus есть ещё похожее событие, называется оно focusin . В отличие от focus данное событие всплывает, и оно может, например, использоваться для обнаружения события фокуса родительскими элементами.

Событие blur посылается элементу, когда он теряет фокус. Так же как и focus , событие blur имеет похожее событие focusout . Данное событие отличается от blur тем, что оно может всплывать. Это возможность можно использовать, например, для получения его на родительских элементах, а не только на том элементе, который его вызвал ( target ).

Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:

Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:

jQuery — Событие изменения (change)

Событие change предназначено для регистрации изменения значения элементов input , textarea и select . Для элементов select , checkboxes , и radio кнопок данное событие возникает сразу (т.е. как только пользователь делает какой-то выбор). Но для других элементов данное событие не будет происходить до тех пор, пока этот элемент не потеряет фокус.

Пример использования события change для слежения за состоянием элемента checkbox . Доступность кнопки будет определять в зависимости от того в каком состоянии ( checked или нет) находиться флажок:

Пример, в котором рассмотрим, как получить значение элемента select при его изменении:

Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:

Пример программного вызова события change для элемента select :

Пример использования события изменения change для получения значения элемента input :

Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.

Пример, использования события ввода для получения значения элемента input :

Пример, в котором представлен один из способов получения значения элемента textarea :

Пример, в котором рассмотрим, как с помощью события change получить значение выбранного элемента input с type , равным radio :

jQuery — Событие выбора (select)

Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type="text" или textarea выделяет текст.

jQuery – Событие отправки формы (submit)

Событие submit возникает у элемента, когда пользователь пытается отправить форму. Данное событие может быть добавлено только к элементам form .

Пример, использования события submit :

Программный вызов отправки формы:

jQuery — Событие прокрутки (scroll)

Для отслеживания состояния скроллинга в jQuery используется событие scroll .

Например, повесим на событие прокрутки страницы функцию, которая будет отображать элемент с классом scrollup , если величина прокрутки больше 200px и скрывать его, если значение прокрутки меньше этой величины.

jQuery — Событие изменения размеров окна (resize)

Для прослушивания события изменения окна браузера используется resize :

Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:

jQuery — Отмена стандартного поведения события

Некоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте href . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод preventDefault объекта event .

Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service :

Что такое всплытие и как его остановить

Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:

В jQuery бывают сценарии, когда в представленной цепочке у какого-нибудь элемента то же есть обработчик для этого события, который выполнять не нужно. И чтобы это событие не распространилось на этот элемент, его необходимо остановить. Для этого в обработчике нужного элемента необходимо вызвать метод stopPropagation объекта event . После вызова этого метода событие остановится, и не будет всплывать.

Читайте также:  Есть ли смысл искать смысл

Например, необходимо чтобы при поднесении курсора к элементу с классом mark , его содержимое становилось оранжевым цветом.

В данном случае если не указывать метод stopPropagation , то при поднесении курсора к элементу span с классом mark данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в span , но и всего абзаца.

Если вам необходимо отменить стандартное поведение браузера и остановить всплытие события, то в jQuery вместо вызова двух этих методов можно просто вернуть в качестве результата функции значение false .

Добавление событий к динамически созданным объектам

Для того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции on :

Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является document . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция on может программно отобрать среди элементов (элемента, который вызвал это событие ( target ) и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции on обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события.

Например, добавим событие к элементу, которого ещё нет на странице:

Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.

Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):

jQuery — Удалить обработчик события

Удаление обработчиков события осуществляется с помощью метода off . При этом с помощью него можно удалить только те обработчики, которые добавлены посредством метода on .

Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.

Например, отключим все обработчики у элементов с классом link:

Например, удалим событие click у всех элементов с классом link :

Специальный селектор ( ** ) позволяет удалить только делегированные события с сохранением не делегированных:

Удалить только указанные делегированные события (с помощью селектора):

Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show :

Создание пользовательского события

Для создания пользовательских событий в jQuery используются методы on и trigger .

Принцип создания специального события jQuery рассмотрим посредством следующего примера:

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

version added: 1.0 .trigger( eventType [, extraParameters ] )

eventType

Строка с названием типа JavaScript события.

extraParameters

Тип: Массив или Объект

Дополнительный параметр, передаваемый в обработчик.

version added: 1.3 .trigger( event [, extraParameters ] )

event

extraParameters

Тип: Массив или Объект

Дополнительный параметр, передаваемый в обработчик.

Каждый обработчик события, прикреплённый методом .on() или один из его сокращений будет выполнен при генерации события, которым можно “выстрелить” вручную, или методом .trigger(). Вызов метода .trigger() выполняет обработчики в том порядке, в котором они были прикреплены:

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

При создании собственного события и его настройки с помощью метода .on(), второй аргумент может быть очень полезен. К примеру, представьте, что мы прикрепили обработчик к событию custom:

Объект события всегда передаётся в качестве первого аргумента. Так же в .trigger() можем передать и массив аргументов. Начиная с jQuery 1.6.2, можно передать просто строку или числовой аргумент.

Отметим разницу между дополнительными данными, передаваемыми при установке обработчика событий (параметр eventData) и данными передаваемыми при вызове события методом trigger() (параметр extraParameters). Во-первых, есть смысловое отличие: eventData задается один раз для каждого обработчика, поэтому, при каждом вызове, он будет получать одно и то же значение. Параметр extraParameters задается для каждого отдельного вызова заново, и поэтому значения могут быть разными. Во-вторых, эти два вида данных доступны внутри обработчика различным способом:

Примеры

Пример: Клик по кнопке #2, но так же вызвать обработку клика по кнопке #1.

Пример: Отправить первую форму, без запуска функции submit():

Пример: Отправить первую форму, без запуска функции submit():

Пример: Передать данные в событие:

Пример: Передать данные через объект события.

Пример: Альтернативный способ передачи данных через объект события: