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

Содержание

1. Материал из JQuery
2. Содержание
3. Типы событий
4. Установка обработчиков для нескольких типов событий
5. Обработчики событий
6. Данные которые получает обработчик
7. Особенности метода
8. В действии
9. 5 последних уроков рубрики «jQuery»
10. Анимация набора текста на jQuery
11. Временная шкала на jQuery
12. Заметка: Перезагрузка и редирект на JavaScript
13. Рисуем диаграмму Ганта
14. AJAX и PHP: загрузка файла

Материал из JQuery

eventType — тип обрабатываемого события. Например «click», «resize» и.т.д. (список всех событий см. ниже).
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она получает объект события eventObject.

eventType — см. выше.
eventData — данные, передаваемые обработчику событий. Они должны быть представлены в форме объекта, в формате: .
handler(eventObject) — см. выше.

Замечание 1: начиная с jQuery-1.7, данный метод считается устаревшим. Предпочтительным является методом .on().

Замечание 2: убрать установленный обработчик можно с помощью метода die().

Замечание 3: для правильной работы метода live(), необходимо вызывать его непосредственно после выбора элементов с помощью селектора.
$(«div»).live(«click», foo); — правильно, $(«div»).next().live(«click», foo); — неправильно.

Содержание

Типы событий

Возможными значениями являются события, которые совпадают со стандартными событиями javascript: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, change, select, submit, keydown, keypress, keyup. Метод .bind() обладает более широким набором типов событий.

Вообще, в качестве типа события можно задавать абсолютно любое строковое значение. Если оно не совпадет ни с одним из значений представленных выше, то будет воспринято jQuery как пользовательское событие (т.е. организованное пользователем). Такое событие может быть вызвано лишь самим пользователем, с помощью методов trigger() и triggerHandler().

Установка обработчиков для нескольких типов событий

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

Обработчики событий

В функциях, которые вызываются в качестве обработчиков событий, переменная this содержит DOM-объект, на котором было вызвано обрабатываемое событие. Для того что бы получить jQuery-объект из DOM-объекта, необходимо воспользоваться функцией $(): $(this). Это может понадобится для дальнейших манипуляций с объектом, например:

в результате, при «клике» по элементу с идентификатором foo, на экран будет выведен содержащийся в нем текст.

Для большинства типов событий действует правило, что если обработчик события возвращает значение false, то обрабатываемое событие отменяется. Например, если обработчик события submit вернет false, то отправка формы будет отменена.

Данные которые получает обработчик

В качестве первого параметра, любой обработчик получает объект, содержащий данные о событии (eventObject). Например, при «клике» по элементу, этот объект, помимо прочего будет содержать координаты курсора: eventObject.pageX и eventObject.pageY.

Кроме этого, существует возможность предоставить обработчику дополнительные данные. Их нужно передавать методу live() в качестве второго параметра (eventData). В обработчике, эти данные будут доступны все в том же объекте eventObject, а точнее в его свойстве eventObject.data:

Особенности метода

Достоинством метода live(), является то, что установленные обработчики будут вызываться как на текущих элементах страницы, так и на будующих. Это становится возможным благодаря особому устройству метода live(). Вместо того, чтобы привязывать обработчик событий к самим элементам, live() устанавливает его в начало дерева элементов DOM, либо элементу, указанному в роли контекста. Допустим, мы обрабатываем нажатие на div-элемент. Когда случается событие, происходит следующее:

1. нажатый div-элемент генерирует событие click.
2. если на этом элементе установлены обработчики, то они будут выполнены, после чего, событие будет передано вверх по иерархии дерева DOM.
3. пройдя таким образом несколько уровней иерархии, мы дойдем до элемента, которому был присвоен специальный обработчик события, методом live().
4. этот обработчик проверит, соответствует ли первоначально нажатый элемент селектору, применительно к которому вызывался метод live().
5. если элемент подходит, то будет вызван соответствующий обработчик.

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

Если вы решили использовать контекст, наиболее простым будет использование метода delegate().

В действии

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

В этой подсказке мы расскажем как обработать одной функцией сразу несколько событий средствами jQuery.

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

Или предварительно написать функцию, которую затем передать в соответствующие методы:

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

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

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Главная >> Frontend >> jQuery. Как обрабатывать события на несколько элементов?

Вопрос не сложный и часто понятный, но помнится мне — был такой на Тостере — поэтому решил написать заметку о том, как можно одним откликом обработать события на нескольких элементах.

Например, у Вас есть две формы, которые Вам нужно обработать. Может быть такое, что формы идентичные и вся логика их работы одинакова — при этом разница примитивна — вплоть до разницы в целевом URL.

В таком случае нужно просто указать в селекторе идентификаторы через запятую. Например:

Источник: computermaker.info