С помощью методов перечисленных в таблице ниже Вы можете создавать обработчики событий и привязывать их к элементам.
Синтаксис:
//Привяжем к кнопке обработчик события click
$(":button").click(function(){$("#par1").html("Новый текст")})
//Вызовем привязанный ранее обработчик
$(":button").click()
Обратите внимание: для того, чтобы узнать о желаемом методе или событие больше щелкните на его названии мышкой.
| Метод | Описание |
|---|---|
| blur() | Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент перестанет быть активным. |
| change() | Привязывает или вызывает функцию, код которой будет выполнен в случае изменения содержимого выбранного элемента. |
| click() | Привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен щелчок мыши. |
| dblclick() | Привязывает или вызывает функцию, код которой выполнится, когда на выбранном элементе будет произведен двойной щелчок мыши. |
| error() | Является устаревшим в jQuery 1.8+. Привязывает или вызывает функцию, код которой выполнится если при загрузке выбранного элемента произойдет ошибка. |
| focus() | Привязывает или вызывает функцию, код которой будет выполнен, когда выбранный элемент станет активным. |
| focusin() | Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент или один из его элементов потомков станет активным. |
| focusout() | Привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент или один из его элементов потомков перестанет быть активным. |
| hover() | Привязывает одну или две функции к выбранному элементу. Код первой привязанной функции выполнится, когда на выбранный элемент будет наведен курсор мыши а второй, когда курсор мыши покинет пределы этого элемента. |
| keydown() | Привязывает или вызывает функцию, код которой выполнится, когда на клавиатуре будет нажата клавиша. |
| keyup() | Привязывает или вызывает функцию, код которой выполнится, когда нажатая на клавиатуре клавиша будет отпущена. |
| load() | Является устаревшим в jQuery 1.8+.Привязывает или вызывает функцию, код которой будет выполнен после загрузки выбранного элемента. |
| mousedown() | Привязывает или вызывает функцию, код которой будет выполнен после нажатия клавиши мыши на выбранном элементе. |
| mouseenter() | Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши. |
| mouseleave() | Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента. |
| mousemove() | Привязывает или вызывает функцию, код которой будет выполнен при передвижении указателя мыши в границах выбранного элемента. |
| mouseout() | Привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента. |
| mouseover() | Привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши. |
| mouseup() | Привязывает или вызывает функцию, код которой будет выполнен, когда нажатая кнопка мыши будет отпущена. |
| ready() | Привязывает или вызывает функцию, код которой будет выполнен, когда страница будет полностью загружена. |
| resize() | Привязывает или вызывает функцию, код которой будет выполнен при изменении размера окна браузера. |
| scroll() | Привязывает или вызывает функцию, код которой будет выполнен при прокрутке содержимого элемента. |
| select() | Привязывает или вызывает функцию, код которой будет выполнен при выделении текста выбранного элемента. |
| submit() | Привязывает или вызывает функцию, код которой будет выполнен при отправлении содержимого выбранной формы. |
| unload() | Является устаревшим в jQuery 1.8+.Привязывает или вызывает функцию, код которой будет выполнен при выгрузке выбранного элемента. |
С помощью методов представленных в таблице ниже Вы сможете управлять обработчиками событий.
| Метод | Описание |
|---|---|
| bind() | Привязывает к выбранному элементу один обработчик события или более. |
| delegate() | Добавляет один обработчик события или более к элементам потомкам выбранного элемента. |
| one() | Привязывает к выбранному элементу один обработчик события или более. Привязанные обработчики при этом могут быть вызваны только один раз. |
| toggle() | Позволяет привязать к выбранному элементу несколько обработчиков событий, между вызовами которых можно переключатся по щелчку мыши. |
| trigger() | Вызывает указанный обработчик события у выбранного элемента. |
| triggerHandler() | Вызывает указанный обработчик события у выбранного элемента. |
| unbind() | Удаляет у выбранных элементов обработчики событий, которые были привязаны с помощью метода bind(). |
| undelegate() | Удаляет у выбранных элементов обработчики событий, которые были привязаны с помощью метода delegate(). |
Объект event хранит информации о произошедшем событии.
Объект event создается для каждого произошедшего события, но для того чтобы иметь возможность обратится к его свойствам и методам, его необходимо явно передать в обработчик события.
Синтаксис:
$(селектор).событие(function(event){
//Затем в коде обработчика Вы можете обращаться к его свойствам и методам следующим образом:
event.data;
event.preventDefault();
});
Обратите внимание: при передаче объекта event в обработчик Вы можете использовать любое имя.
| Свойство | Описание |
|---|---|
| currentTarget | Содержит имя DOM элемента, в котором произошло событие. |
| data | Содержит дополнительные данные переданные обработчику события во время привязки его к элементу. |
| pageX | Содержит координаты указателя мыши по оси X во время вызова события. |
| pageY | Содержит координаты указателя мыши по оси Y во время вызова события. |
| result | Содержит последнее значение возвращенное вызванным ранее обработчиком события. |
| target | Содержит имя DOM элемента, который вызвал событие. |
| timeStamp | Содержит количество прошедших с 1 Января 1970 года миллисекунд до вызова данного события. |
| type | Содержит тип (название) произошедшего события. |
| which | Содержит код кнопки, которая была зажата во время вызова данного события. |
| Метод | Описание |
|---|---|
| isDefaultPrevented() | Позволяет узнать был ли вызван метод preventDefault() для данного элемента. |
| isImmediatePropagationStopped() | Позволяет узнать был ли вызван метод stopImmediatePropagation() для данного элемента. |
| isPropagationStopped() | Позволяет узнать был ли вызван метод stopPropagation() для данного элемента. |
| preventDefault() | Предотвращает выполнение стандартного действия элемента. |
| stopImmediatePropagation() | Запрещает вызов остальных обработчиков события привязанных к элементу. |
| stopPropagation() | Останавливает "всплытие" вызова события к родительским элементам. |