LOGO JQuery
jQuery API: Базовые события

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

.bind(eventType, [eventData], handler(eventObject))

eventType — тип обрабатываемого события.
blur 
focus 
focusin 
focusout 
load 
resize 
scroll 
unload 
click 
dblclick 
mousedown 
mouseup 
mousemove 
mouseover 
mouseout 
mouseenter 
mouseleave 
change 
select 
submit 
keydown 
keypress 
keyup 
error
eventData — данные, передаваемые обработчику событий.

Они должны быть представлены объектом, в формате:
{fName1:value1, fName2:value2, ...}.
handler(eventObject) — функция, которая будет установлена в качестве обработчика.
При вызове она получает объект события eventObject.

Простой пример:
// Установим обработчик нажатия кнопкой мыши, элементу с идентификатором foo
$('#foo').bind('click', function(){
  alert('Вы нажали на элемент "foo"');
});
// Теперь, при нажатии на элемент foo, будет выведено сообщение
Установка обработчиков нескольким событиям

Чтобы установить один обработчик для нескольких типов событий одновременно, необходимо перечислить их через пробел.
bind('mouseenter mouseleave', someHandler)
Для того, чтобы обеспечить несколько событий отдельными обработчиками
$('#foo').bind({
  click: function() {
    // действия в ответ на "клик" по элементу с идентификатором foo
  },
  mouseenter: function() {
    // действия в ответ на наведение мыши на элемент с идентификатором foo
  }
});
Обработчики событий

В функциях, которые вызываются в качестве обработчиков событий, переменная $(this) содержит DOM-объект, с которым произошло обрабатываемое событие.
$('#foo').bind('click', function() {
  alert($(this).text());
});
1.4+ Многократная установка одной функции в качестве обработчика одного события не приведет к ошибке:
function test(){ alert("Hello"); }
$("button").click( test );
$("button").click( test );
Дополнительные данные которые получит обработчик

Существует возможность предоставить обработчику дополнительные данные.
Их нужно передавать методу bind() в качестве второго параметра (eventData).
В обработчике, эти данные будут доступны все в том же объекте eventObject, а точнее в его свойстве eventObject.data:
$('#foo').bind('click', {msg:'Spoon!'}, function(eventObject){
  alert(eventObject.data.msg);
});
// теперь, при нажатии на элемент с id=foo, на экране будет появляться сообщение Spoon!
В примере показано, как можно осуществить обработку событий наведения, нажатия и двойного нажатия на элемент:
// при нажатии по элементу <p> выведем текст, содержащий координаты клика
$("p").bind("click", function(event){
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $("span").text("Клик, это звучит гордо! Особенно в координатах " + str);
});

// при двойном нажатии по элементу <p> выведем название тега нажатого элемента
$("p").bind("dblclick", function(){
  $("span").text("Клик - хорошо, а двойной лучше! Нажат элемент " + this.nodeName);
});

// при наведении и отведении курсора от элемента <p> будем "переключать" наличие класса over
$("p").bind("mouseenter mouseleave", function(){
  $(this).toggleClass("over");
});
Откройте пример в новом окне и посмотрите исходный код

.live(eventType, handler)

jQuery < 1.9 (относительно устаревший) Подробнее

Устанавливает обработчик событий на выбранные элементы страницы.

Метод имеет одну важную особенность, отличающую его от bind():

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

eventType — тип обрабатываемого события.
Например "click", "resize" и.т.д.

handler(eventObject) — функция, которая будет установлена в качестве обработчика.
При вызове она получает объект события eventObject.

С помощью методов live и bind, установим обработчики нажатия кнопки мыши по элементам списка.

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

На этом примера хорошо видна разница в работе методов live и bind:
// методом live установим обработчик нажатия мышью по элементу
$("li").live("click", function(event){
  $("span").append("Нажат элемент списка с обработчиком, установленным методом <b>live</b><br><br>");
});

// методом bind установим обработчик нажатия мышью по элементу
$("li").bind("click", function(event){
  $("span").append("Нажат элемент списка с обработчиком, установленным методом <b>bind</b><br>");
});

$("button").bind("click", function(event){
  $("ul").append("<li>Новый</li>");
});
Откройте пример в новом окне и посмотрите исходный код

.one(eventType, [eventData], handler(eventObject))

Устанавливает обработчик события выбранным элементам страницы.

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

eventType — тип обрабатываемого события. Например "click", "resize" и.т.д.
eventData — данные, передаваемые обработчику событий. Они должны быть представлены в форме объекта, в формате:
{fName1:value1, fName2:value2, ...}
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject
// Установим обработчик нажатия кнопкой мыши, элементу с идентификатором foo
$('#foo').one('click', function(){
  alert('Вы нажали на элемент "foo"');
});
 
// Теперь, при нажатии на элемент foo, будет выведено сообщение

.unbind([eventType], [handler(eventObject)])

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

eventType — тип обрабатываемого события. Например "click", "resize" и.т.д.

handler(eventObject) — функция, установленная в качестве обработчика, который необходимо удалить.

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

Если не указывать какой именно обработчик следует удалить, будут удалены все обработчики заданного события:
$('#foo').unbind('click'); 
// удалим все обработчики события click у элемента foo
А если не указывать тип события, то у выбранных элементов будут удалены обработчики всех событий:
$('#foo').unbind(); 
// удалим все обработчики установленные на элементе foo

.die([eventType], [handler])

У выбранных элементов страницы, удаляет обработчики событий, установленные методом live()

eventType — тип обрабатываемого события, обработчики которого должны быть удалены. Например "click", "resize" и.т.д.
handler — имя функции, установленной в качестве обработчика.

Простой пример:
var handler = function() {
  alert('Шла Саша по шоссе');
};
$('#foo').live('click', handler);  // установим обработчик нажатия кнопки мыши на элементе c id = foo
$('#foo').die('click', handler);   // удалим обработчик
Если не указывать какой именно обработчик следует удалить, будут удалены все обработчики заданного события:
$('#foo').die('click'); 
// удалим все обработчики события click у элемента foo
А если не указывать тип события, то у выбранных элементов будут удалены обработчики всех событий:
$('#foo').die(); 
// удалим все обработчики установленные на элементе foo

.trigger(eventType, [extraParameters])

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

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

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

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

.triggerHandler(type, )

Это особенный метод вызова всех связанных с элементом обработчиков событий БЕЗ выполнения браузером действий по умолчанию.

Испытайте следующий пример.

Если Вы вызываете trigger(), то получаете соответствующее сообщение

И можете заметить как браузер ТОЖЕ совершил действие по умолчанию - передал фокус элементу input.

Попробуйте теперь (убрав фокус с элемента input) вызвать triggerHandler().

Сообщение Вы также получите, но действия браузера по умолчанию не произойдет.
$("#old").click(function(){
  $("input").trigger("focus");
});
$("#new").click(function(){
  $("input").triggerHandler("focus");
});
$("input").focus(function(){
  $("<span>Focused!</span>").appendTo("body")
    .fadeOut(1000);
});
Откройте пример в новом окне и посмотрите исходный код

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

.ready()

Устанавливает обработчик готовности дерева DOM.

Простой пример:
$(document).ready(function(){
  alert('Структура страницы сформирована, можно приступать!');
});

.load()

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

Обработка готовности всей страницы:
$(window).load(function () {
  // манипуляции с готовой страницей
});

.unload()

Устанавливает обработчик выхода со страницы (при переходе по ссылке, закрытии браузера и.т.д.) для объекта window.
$(window).unload(function(){ 
  alert("Пока, пользователь!"); 
});

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

.error()

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

Простой пример. Если по какой-то причине, на страницу не сможет загрузиться картинка, будет выведено соответствующее сообщение:
$('img').error(function(){
  alert('Проблемы с загрузкой изображения')
});
Чтобы сохранить лог ошибок JavaScript на стороне сервера, можно попробовать сделать так
$(window).error(function(msg, url, line){
  jQuery.post("js_error_log.php",
    { msg: msg, url: url, line: line });
});
Чтобы скрыть от пользователя ошибки JavaScript, попробуйте:
$(window).error(function(){
  return true;
});

.resize()

Устанавливает обработчик изменения размеров окна браузера, либо, запускает это событие.
// установим обработчик события resize
$(window).resize(function(){
  alert('Размеры окна браузера изменены.');
});
 
// вызовем событие resize
$(window).resize();

.scroll()

Устанавливает обработчик "прокрутки" элементов документа, либо, запускает это событие.

Узнать/поменять величину прокрутки можно с помощью методов .scrollTop(), .scrollLeft()

Что бы делать что-нибудь, отслеживая прокрутку области просмотра документа:
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
  $("span").css("display", "inline").fadeOut("slow");
});
Откройте пример в новом окне и посмотрите исходный код