Jquery события – Еще раз о делегирование или как правильно использовать свои события / Habr

События — JQuery

Материал из JQuery

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

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

Базовые

.on() Универсальный метод для установки обработчиков событий на выбранные элементы страницы.
.off() Удаляет обработчики, установленные с помощь .on().
.bind() Устанавливает обработчик события на выбранные элементы страницы. Обработчик не сработает на элементах, появившихся после его установки.
.live() Устанавливает обработчик события на выбранные элементы страницы. Обработчик сработает и на элементах, появившихся после его установки.
.delegate() Устанавливает обработчик события на выбранные элементы страницы. Элементы выбираются с помощью уточняющего селектора. Обработчик будет действовать и на элементах, появившихся после его установки.
.one() Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов.
.unbind() Удаляет обработчик событий у выбранных элементов.
.die() Удаляет обработчик событий, который был установлен с помощью live().
.undelegate() Удаляет обработчик событий, который был установлен с помощью delegate().
.trigger() Выполняет указанное событие и запускает его обработчик.
.triggerHandler() Запускает обработчик указанного события, без его выполнения.
jQuery.proxy() По заданной функции, создает другую, внутри которой переменная this будет равна заданному значению.
event Объект, содержащий данные о текущем событии. Передается всем обработчикам событий.

События мыши

.click() Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие.
.dblclick() Устанавливает обработчик двойного "клика" мышью по элементу, либо, запускает это событие.
.hover() Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом.
.mousedown() Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие.
.mouseup() Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие.
.mouseenter() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseover.
.mouseleave() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие. Появление этого события, отработано лучше, чем стандартного mouseout.
.mousemove() Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие.
.mouseout() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие.
.mouseover() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие.
.toggle() Поочередно выполняет одну из двух или более заданных функций, в ответ на "клик" по элементу.

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

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

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

.focus() Устанавливает обработчик получения фокуса, либо, запускает это событие.
.blur() Устанавливает обработчик потери фокуса, либо, запускает это событие.
.focusin() Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних.
.focusout() Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних.
.select() Устанавливает обработчик выделения текста, либо, запускает это событие.
.submit() Устанавливает обработчик отправки формы, либо, запускает это событие.
.change() Устанавливает обработчик изменения элемента формы, либо, запускает это событие.

События загрузки страницы

.ready() Устанавливает обработчик готовности дерева DOM.
.load() Устанавливает обработчик завершения загрузки элемента.
.unload() Устанавливает обработчик ухода со страницы (при переходе по ссылке, закрытии браузера и.т.д.).

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

.error() Устанавливает обработчик ошибки при загрузке элементов (например отсутствие необходимой картинки на сервере).
.resize() Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.
.scroll() Устанавливает обработчик "прокрутки" элементов документа, либо, запускает это событие.

jQuery события | jQuery справочник

Свойство / МетодОписание
event.currentTargetОпределяет текущий элемент DOM, в котором в настоящий момент обрабатывается событие.
event.dataНеобязательный объект данных, передаваемый методу события, когда текущий обработчик события привязывается.
event.delegateTargetВозвращает элемент, к которому был прикреплен вызванный в данный момент обработчик события. Это свойство будет отличаться от свойства event.currentTarget только в том случае, если обработчик события делегирован, а не на прямую привязан к элементу.
event.isDefaultPrevented()Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.preventDefault() и false в обратном случае.
event.isImmediatePropagationStopped()Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.stopImmediatePropagation() и false в обратном случае.
event.isPropagationStopped()Метод возвращает логическое значение true, если для этого объекта событий вызывался метод event.stopPropagation() и false в обратном случае.
event.metaKeyСодержит логическое значение, которое указывает на то, была ли нажата, или нет мета клавиша Сmd (Mac) / Windows (Windows), когда событие сработало.
event.namespaceСоответствует пользовательскому пространству имён, определенному при срабатывании события (строковое значение).
event.pageXПозиция курсора мыши относительно левого края документа, или элемента.
event.pageYПозиция курсора мыши относительно верхнего края документа, или элемента.
event.preventDefault()Если этот метод вызывается, то действие события по умолчанию не будет срабатывать (отменяет действие события по умолчанию). Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.
event.relatedTargetСоответствует другому элементу DOM, который участвует в событии, если таковой имеется.
event.resultСодержит последнее значение, возвращаемое обработчиком события, которое было вызвано этим событием (если значение не было равно undefined).
event.stopImmediatePropagation()Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM) и останавливает цепочку вызова событий для текущего элемента.
event.stopPropagation()Прекращает дальнейшую передачу текущего события (предотвращает всплытие по дереву DOM).
event.targetDOM элемент, который инициировал событие.
event.timeStampРазница в миллисекундах между тем моментом, когда браузер создал событие и полуночи (Unix-время).
event.typeОписывает тип события, которое было вызвано.
event.whichВ зависимости от типа события свойство указывает на определенную клавишу клавиатуры или кнопку мыши, которая была нажата пользователем.

jQuery - События

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

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

Базовые события

Название Описание
.on() Универсальный метод установки обработчиков событий на элементы
off() Удаляет обработчики, установленные с помощь .on()
.one() Устанавливает обработчик события на выбранные элементы страницы, который сработает только по одному разу, на каждом из элементов
.unbind() Удаляет обработчик событий у выбранных элементов
.trigger() Выполняет указанное событие и запускает его обработчик
.triggerHandler() Запускает обработчик указанного события, без его выполнения
jQuery.proxy() По заданной функции, создает другую, внутри которой this будет равен заданному значению
event Объект с данными о текущем событии

События мыши

Название Описание
.click() Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие
.dblclick() Устанавливает обработчик двойного "клика" мышью по элементу, либо, запускает это событие
.hover() Устанавливает обработчик двух событий: появления/исчезновения курсора над элементом
.mousedown() Устанавливает обработчик нажатия кнопки мыши, либо, запускает это событие
.mouseup() Устанавливает обработчик поднятия кнопки мыши, либо, запускает это событие
.mouseenter() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие
.mouseleave() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие
.mousemove() Устанавливает обработчик движения курсора в области элемента, либо, запускает это событие
.mouseout() Устанавливает обработчик выхода курсора из области элемента, либо, запускает это событие
.mouseover() Устанавливает обработчик появления курсора в области элемента, либо, запускает это событие
.toggle() Поочередно выполняет одну из двух или более заданных функций, в ответ на "клик" по элементу

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

Название Описание
.keydown() Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие
.keyup() Устанавливает обработчик возвращение клавиши клавиатуры в ненажатое состояние, либо, запускает это событие
.keypress() Устанавливает обработчик ввода символа с клавиатуры, либо, запускает это событие

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

Название Описание
.focus() Устанавливает обработчик получения фокуса, либо, запускает это событие
.blur() Устанавливает обработчик потери фокуса, либо, запускает это событие
.focusin() Устанавливает обработчик получения фокуса самим элементом или одним из его дочерних
.focusout() Устанавливает обработчик потери фокуса самим элементом или одним из его дочерних
.select() Устанавливает обработчик выделения текста, либо, запускает это событие
.submit() Устанавливает обработчик отправки формы, либо, запускает это событие
.change() Устанавливает обработчик изменения элемента формы, либо, запускает это событие

События загрузки страницы

Название Описание
.ready() Устанавливает обработчик готовности дерева DOM
.load() Устанавливает обработчик завершения загрузки элемента
.unload() Устанавливает обработчик ухода со страницы

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

Название Описание
.error() Устанавливает обработчик ошибки при загрузке элементов
.resize() Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие
.scroll() Устанавливает обработчик "прокрутки" элементов документа, либо, запускает это событие

 

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

Вызов события — JQuery

Материал из JQuery

.trigger()

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

.trigger(eventType, [extraParameters]):jQuery1.0

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

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

Простой пример:

// установим обработчик нажатия кнопки мыши на элементе foo
$('#foo').bind('click', function(){
  alert('Шла Саша по шоссе')
});
 
// вызовем событие нажатия на элемент, что приведет к выполнению обработчика
$('#foo').trigger('click');


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

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

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

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

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

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

// зададим обработчик с двумы дополнительными параметрами
$('#foo').bind('custom', function(event, param1, param2){
  alert(param1 + "\n" + param2);
});
 
// вызовем событие методом trigger, в результате будет запущен наш обработчик
$('#foo').trigger('custom', ['Custom', 'Event']); // вторым параметром передан массив с двумя строками


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

// зададим обработчик
$('#foo').bind('custom', {otherParam:'uha-ha!'}, function(event, param1, param2){
  alert(param1 + "\n" + param2); // так осуществляется доступ к данным extraParameters
  alert(event.data.otherParam);  // а так к данным eventData
});
 
// вызовим событие методом trigger, в результате будет запущен наш обработчик
$('#foo').trigger('custom', ['Custom', 'Event']);

Ссылки

Объект event — JQuery

Материал из JQuery

event

объект, содержащий данные о произошедшем событии. Передается во все обработчики событий, которые были установлены средствами библиотеки jQuery. Объект event немного отличается от стандартных объектов событий, которые получают обработчики, установленные обычными средствами javascript. Некоторые поля подвергаются изменению для обеспечения кроссбраузерности. Помимо этого, в event добавлены дополнительные поля и методы.


Следующие поля гарантировано присутствуют в каждом объекте события (хотя некоторые из них могут иметь значение undefined):
altKey, attrChange, attrName, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, fromElement, handler, keyCode, layerX, layerY, metaKey, namespace (только с jQuery-1.4.3 и старше), newValue, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedNode, relatedTarget, screenX, screenY, shiftKey, srcElement, target, toElement, view, wheelDelta, which


Объекты event, которые предоставляет непосредственно javascript могут отличаться от браузера к браузеру. Поэтому, для обеспечения кроссбраузерности, перед передачей объекта event обработчику jQuery может изменить следующие из перечисленных полей:

  • target
  • relatedTarget
  • pageX
  • pageY
  • which
  • metaKey

Описание некоторых составляющих объекта event

event.currentTarget

Содержит DOM-элемент, событие которого обрабатывается. Внутри обработчика, currentTarget всегда совпадает с переменной this. Однако, этот элемент может не являться источником события, поскольку оно могло быть передано от дочернего элемента, в результате "всплытия" события, вверх по иерархии DOM. Первоначальный источник события содержится в event.target.

event.data

event.delegateTarget

(Введено в jQuery-1.7). Содержит DOM-элемент, на который действительно установлен сработавший обработчик. Это свойство имеет смысл, если обработчик установлен делегированно. Если обработчик установлен непосредственно, то значение event.delegateTarget будет совпадать с event.currentTarget.

event.isDefaultPrevented()

Определяет, вызывался ли метод event.preventDefault() на данном объекте событий.

event.isImmediatePropagationStopped()

Определяет, вызывался ли метод event.stopImmediatePropagation() на данном объекте событий.

event.isPropagationStopped()

Определяет, вызывался ли метод event.stopPropagation() на данном объекте событий.

event.namespace

event.pageX, event.pageY

Координаты курсора мыши относительно левого верхнего угла документа.

event.preventDefault()

Отменяет выполнение события. Например, при "клике" по ссылке, переход по ней не произойдет, если внутри обработчика будет вызван этот метод.

event.relatedTarget

Не текущий DOM-элемент, участвующий в событии. Для события mouseout будет содержать элемент, куда переместился курсор, а для mousein элемент, откуда курсор пришел.

event.result

Содержит значение, которое возвратил предыдущий обработчик этого события. Если предыдущего обработчика нет, возвратит undefined.

event.stopPropagation()

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

event.stopImmediatePropagation()

Предотвращает выполнение следующих обработчиков текущего события, а так же, дальнейшую передачу события вверх по иерархии дерева DOM. Если требуется лишь остановить передачу события вверх по иерархии, а другие обработчики на текущем элементе останавливать не требуется, воспользуйтесь методом event.stopPropagation().

event.target

DOM-элемент, являющийся источником события.

event.timeStamp

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

event.type

Тип события.

event.which

При возникновении события, связанного с нажатием клавиш клавиатуры или кнопок на странице, это поле будет содержать информацию о нажатых клавишах или кнопках. В отличии от стандартных event.keyCode и event.charCode, содержимое в event.which кроссбраузерное.

Ссылки

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *