// установим обработчик события mouseover, элементу с идентификатором foo
$('#foo').mouseover(function(){
  alert('Вы поместили курсор в зону элемента foo.');
});
 
// вызовем событие mouseover на элементе foo
$('#foo').mouseover();
 
// установим еще один обработчик события mouseover, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').mouseover({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Курсор появился над элементом с классом block. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

1.2. .mouseout()

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

Пример

// установим обработчик события mouseout, элементу с идентификатором foo
$('#foo').mouseout(function(){
  alert('Вы убрази курсор из зоны элемента foo.');
});
 
// вызовем событие mouseout на элементе foo
$('#foo').mouseout();
 
// установим еще один обработчик события mouseout, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').mouseout({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Курсор вышел из границ элемента с классом block. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

1.3. .click()

Устанавливает обработчик «клика» мышью по элементу, либо, запускает это событие.

Пример

// установим обработчик события click, элементу с идентификатором foo
$('#foo').click(function(){
  alert('Вы нажали на элемент "foo"');
});
 
// вызовем событие click на элементе foo
$('#foo').click();
 
// установим еще один обработчик события click, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').click({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Вы нажали на элемент с классом block. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

1.4. .dblclick()

Устанавливает обработчик двойного «клика» мышью по элементу, либо, запускает это событие.

Пример

// установим обработчик события dblclick, элементу с идентификатором foo
$('#foo').dblclick(function(){
  alert('Вы героически кликнули по элементу "foo" дважды!');
});
 
// вызовем событие dblclick на элементе foo
$('#foo').dblclick();
 
// установим еще один обработчик события dblclick, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').dblclick({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Над элементом с классом block произошло двойное нажатие кнопки мыши. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

1.5. .mousemove()

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

Пример

// установим обработчик события mousemove, элементу с идентификатором foo
$('#foo').mousemove(function(){
  alert('Вы двинули мышью! С вас 3 доллара за оказанные услуги ясновидения.');
});
 
// вызовем событие mousemove на элементе foo
$('#foo').mousemove();
 
// установим еще один обработчик события mousemove, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').mousedown({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Был перемещен курсор мыши. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

1.6. .mousedown()

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

Пример

// установим обработчик события mousedown, элементу с идентификатором foo
$('#foo').mousedown(function(eventObject){
  alert('Вы нажали на кнопку мыши, над элементом "foo". Код нажатой клавиши - ' + eventObject.which);
});
 
// вызовем событие mousedown на элементе foo
$('#foo').mousedown();
 
// установим еще один обработчик события mousedown, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').mousedown({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Нажата кнопка мыши. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

1.7. .mouseup()

Устанавливает обработчик возвращения кнопки мыши в ненажатое состояние, либо, запускает это событие.

Пример

// установим обработчик события mouseup, элементу с идентификатором foo
$('#foo').mouseup(function(eventObject){
  alert('Вы отпустили кнопку мыши. Код отпущенной клавиши - ' + eventObject.which);
});
 
// вызовем событие mouseup на элементе foo
$('#foo').mouseup();
 
// установим еще один обработчик события mouseup, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').mousedown({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Вы отпустили кнопку мыши. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

2. События с формами

2.1. .submit()

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

Пример

// установим обработчик события submit, элементу с идентификатором foo,
// после чего запретим отправку данных на сервер
$('#foo').submit(function(){
  alert('Форма foo отправлена на сервер.');
  return false;
});
 
// вызовем событие submit на элементе foo
$('#foo').submit();
 
// установим еще один обработчик события submit, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').submit({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Форма foo отправлена на сервер. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

2.2. .focus()

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

Пример

// установим обработчик события focus, элементу с идентификатором foo
$('#foo').focus(function(){
  alert('Элемент foo получил фокус.');
});
 
// вызовем событие focus на элементе foo
$('#foo').focus();
 
// установим еще один обработчик события focus, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').focus({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Элемент с классом block приобрел фокус. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

2.3. .blur()

Устанавливает обработчик потери фокуса, либо, запускает это событие. Как только элемент формы теряет фокус, происходит событие blur

Пример

// установим обработчик события blur, элементу с идентификатором foo
$('#foo').blur(function(){
  alert('Элемент foo потерял фокус.');
});
 
// вызовим событие blur на элементе foo
$('#foo').blur();
 
// установим еще один обработчик события blur, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').blur({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Элемент с классом block потерял фокус. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

2.4. .change()

Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие. Как только формы изменяются, происходит событие change

Пример

// установим обработчик события change, элементу с идентификатором foo
$('#foo').change(function(){
  alert('Элемент foo был изменен.');
});
 
// вызовим событие change на элементе foo
$('#foo').change();
 
// установим еще один обработчик события change, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').change({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Элемент с классом block был изменен. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

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

3.1. .keypress()

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

Пример

// установим обработчик события keypress, элементу с идентификатором foo
$('#foo').keypress(function(eventObject){
  alert('Вы ввели символ с клавиатуры. Его код равен ' + eventObject.which);
});
 
// вызовем событие keypress на элементе foo
$('#foo').keypress();
 
// установим еще один обработчик события keypress, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').keypress({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Вы ввели символ с клавиатуры. '+
        'В обработчик этого события переданы данные: ' + externalData);
});

3.2. .keydown()

Устанавливает обработчик перехода клавиши клавиатуры в нажатое состояние, либо, запускает это событие.

Пример

// установим обработчик события keydown, элементу с идентификатором foo
// и проверим, какая именно клавиша была нажата
$('#foo').keydown(function(eventObject){
  alert('Клавиша клавиатуры приведена в нажатое состояние. Код вводимого символа - ' + eventObject.which);
});
 
// вызовем событие keydown на элементе foo
$('#foo').keydown();
 
// установим еще один обработчик события keydown, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').keydown({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Нажата кнопка клавиатуры. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

3.3. .keyup()

Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.

Пример

// установим обработчик события keyup, элементу с идентификатором foo
// и проверим, какая именно клавиша была отпущена
$('#foo').keyup(function(eventObject){
  alert('Клавиша клавиатуры возвратилась в ненажатое состояние. Код символа на этой клавише - ' + eventObject.which);
});
 
// вызовем событие keyup на элементе foo
$('#foo').keyup();
 
// установим еще один обработчик события keyup, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').keyup({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Кнопка клавиатуры была отпущена. '+
        'В обработчик этого события переданы данные: ' + externalData );
});

4. События окна браузера

4.1. .load()

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

Примеры использования

Для страницы, содержащей картинку

<img src="book.png" alt="Book" id="book" />

следующий код позволит обработать ее загрузку:

$('#book').load(function() {
  // действия, в ответ на загрузку изображения
});

А вот так можно обработать готовность всей страницы:

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

4.2. .resize()

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

Пример

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

4.3. .scroll()

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

Пример

// установим обработчик события scroll, элементу с идентификатором foo
$('#foo').scroll(function(){
  alert('Элемент foo был прокручен... скроллирован... ну как там это называется то?!');
});
 
// вызовем событие scroll на элементе foo
$('#foo').scroll();
 
// установим еще один обработчик события scroll, на этот раз элементам 
// с классом block. В обработчик передадим дополнительные данные
$('.block').scroll({a:12, b:"abc"}, function(eventObject){
  var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b;
  alert('Элемент с классом block был прокручен'+
        'В обработчик этого события переданы данные: ' + externalData );
});

4.4. .unload()

Устанавливает обработчик выхода со страницы (при переходе по ссылке, закрытии браузера и.т.д.) для объекта window.

Пример

$(window).unload(function(){ 
  alert("Пока, пользователь!"); 
});

Wiki-учебник по веб-технологиям: jQuery/Реакция/События ...

1. События с мышью

1.1. .mouseover()