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

Речь идет, как о стандартных событиях javascript, так новых, организованных самой библиотекой jQuery.

События мыши

.click([fn])

Устанавливает обработчик "клика" мышью по элементу, либо, запускает это событие.
// установим обработчик события 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 );
});

.dblclick([fn])

Устанавливает обработчик двойного "клика" мышью по элементу, либо, запускает это событие.
/ установим обработчик события 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 );
});

.hover(handlerIn, handlerOut)

Симулирует hovering - отслеживание входа указателя мыши в пределы объекта и выхода за его пределы.

Всякий раз, когда указатель мыши оказывается поверх объекта, вызывается функция, переданная в качестве первого аргумента.

Аналогично, когда указатель мыши выходит за пределы объекта - вызывается функция, которая является вторым аргументом.
// установим обработчики, элементу с идентификатором foo. Обработчики будут выводить текстовые сообщения
$('#foo').hover(
function(){
  alert('Вы попали на территорию элемента "foo", известную своей валидной версткой'+ 
        'и наличием диких обработчиков событий.');
},
function(){
  alert('Вы покинули территорию элемента "foo". Мы будем рады видеть вас снова.');
});
В следующем примере в конце каждого элемента списка добавляется три звездочки (конечно в тот момент, когда над ним находится указатель мыши).
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);
Откройте пример в новом окне и посмотрите исходный код

.mousedown([fn])

Устанавливает обработчик нажатия кнопки мыши на элементе, либо, запускает это событие.
// установим обработчик события 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 );
});

.mouseup([fn])

Устанавливает обработчик возвращения кнопки мыши в ненажатое состояние, либо, запускает это событие.
// установим обработчик события 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 );
});
В этом примере добавляется текст сообщений, когда происходят события mouseup и mousedown на элементе p.
$("p").mouseup(function(){
$(this)
	.append('<span style="color: #ff0000">Up!</span>');
}).mousedown(function(){
$(this)
	.append('<span style="color: #0000ff">Down!</span>');
});
Откройте пример в новом окне и посмотрите исходный код

.mouseenter([fn])

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

.mouseleave([fn])

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

.mousemove([fn])

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

Обработчик события принимает один аргумент - объект события, в свойствах clientX и clientY которого представлены координаты указателя мыши.

В этом примере показываем координаты указателя мыши в то время, как указатель перемещается над элементом div.

Примите во внимание, что здесь пример демонстрируется во фрейме, поэтому координаты курсора высчитываются относительно этого фрейма.
$("div").mousemove(function(e){
  var pCoords = "( "+e.pageX+", "+e.pageY+" )";
  var cCoords = "( "+e.clientX+", "+e.clientY+" )";
  $("span:first").text("e.pageX,e.pageY-" + pCoords);
  $("span:last").text("e.clientX,e.clientY-" + cCoords);
});
Откройте пример в новом окне и посмотрите исходный код

.mouseout([fn])

Связывает функцию с событием mouseout для каждого элемента набора.
Событие mouseout обычно вызывается, когда указатель мыши выходит за пределы элемента.

.mouseover([fn])

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

В этом примере показываются сообщения, когда происходят события mouseover и mouseout.
Событие mouseout вызывается, когда указатель мыши перемещается в/из дочернего элемента, тогда как для mouseleave этого не происходит.
var i = 0;
$("div.overout").mouseout(function(){
  $("p:first",this).text("мышь out");
  $("p:last",this).text(++i);
}).mouseover(function(){
  $("p:first",this).text("мышь over");
});
  
var n = 0;
$("div.enterleave").mouseenter(function(){
  $("p:first",this).text("мышь пришла");
}).mouseleave(function(){
  $("p:first",this).text("мышь ушла");
  $("p:last",this).text(++n);
});
Откройте пример в новом окне и посмотрите исходный код

.toggle(fn, fn1)

Переключается между двумя функциями, которые по очереди вызываются каждым следующим кликом.
Каждый раз, когда клик совершен на выбранном элементе, срабатывает первая функция.
Если на том же элементе совершен еще один клик - срабатывает вторая функция.
Каждый следующий клик продолжает переключение между этими двумя функциями.

Можно использовать unbind("click"), чтобы отменить действие toggle().

Расширенная справка по toggle()

В следующем примере мы применяем и следующим кликом отменяем стили для каждого элемента списка.
$("li").toggle(
  function () {
    $(this).css("list-style-type", "disc")
      .css("color", "blue");
  },
  function () {
    $(this).css({"list-style-type":"", "color":""});
  }
);
Откройте пример в новом окне и посмотрите исходный код

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

.keydown([fn])

Событие keydown обычно вызывается, когда на клавиатуре нажата какая-либо клавиша.

Чтобы выполнять различные действия в зависимости от того, какая клавиша нажата на клавиатуре, попробуйте сделать так:
$(window).keydown(function(event){
  switch (event.keyCode) {
    // ...
    // разные клавиши выполняют разные сценарии
    // разные браузеры могут предоставлять разные коды
    // ...
  }
});
Список кодов клавиш

.keyup([fn])

Устанавливает обработчик возвращения клавиши клавиатуры в ненажатое состояние, либо, запускает это событие.
// установим обработчик события 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 );
});
Небольшой пример демонстрирует, как выполнить какое-либо действие в тот момент, когда отпущена клавиша escape:
$(document).keyup(function(event){
  if (event.keyCode == 27) {
    alert('escaped!');
  }
});

.keypress([fn])

Событие keypress обычно вызывается, когда на клавиатуре была нажата какая-либо клавиша.
Событие keypress определяется как keydown + keyup на какой-либо клавише.

В этом примере мы показываем код нажатой клавиши, но добавляем в строку только буквы латинского алфавита и пробелы.
$("input").keypress(function (e) {
if (e.which == 32 || 
	(65 <= e.which && e.which <= 65 + 25) || 
	(97 <= e.which && e.which <= 97 + 25)
	) {
	var c = String.fromCharCode(e.which);
	$("p").append($("<span></span>"))
		.children(":last")
		.append(document.createTextNode(c))
	;
	} else if ( e.which == 8 ) {
		// backspace in IE only be on keydown
		$("p").children(":last").remove();
	}
$("div").text(e.which);
});
Откройте пример в новом окне и посмотрите исходный код

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

.blur([fn])

Устанавливает обработчик потери фокуса, либо, запускает это событие.
// установим обработчик события 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 );
});
Чтобы выводить в alert сообщение "Hello World!" каждый раз, когда для любого параграфа наступает событие blur, надо сделать следующее:
$("p").blur( function () { alert("Hello World!"); } );

.focus([fn])

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

Чтобы при загрузке страницы сразу передать фокус элементу с идентификатором 'login', сделайте следующее:
$(document).ready(function(){
  $("#login").focus();
});
Чтобы запретить пользователю писать что-либо в поле ввода, сделайте так:
$("input[@type=text]").focus(function(){
  $(this).blur();
});
В этом примере как только элемент input получает фокус, отображается следующий сразу за ним элемент span и в течении одной секунды "затухает".
$("input").focus(function () {
  $(this).next("span").css('display','inline')
    .fadeOut(1000);
});
Откройте пример в новом окне и посмотрите исходный код

.focusin([fn])

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

.focusout([fn])

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

.select([fn])

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

Чтобы вызвать событие select для всех элементов input, попробуйте сделать так:
$("input").select();
Чтобы выполнить какие-либо действия, когда выделяется текст в элементах ввода текста:
$(document).select( function () { 
     $("div").text("Что-то было выделено!").show().fadeOut(1000); 
});
Откройте пример в новом окне и посмотрите исходный код

.submit([fn])

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

Чтобы вызвать событие submit для первой формы на странице, надо сделать так:
$("form:first").submit();
Чтобы предотвратить отправку формы, если какая-либо переменная не установлена, сделайте:
$("form").submit( function () {
  return this.some_flag_variable;
} );
Или более подробный пример на ту же тему:
$("form").submit(function() {
  if ($("input:first").val() == "correct") {
    $("span").text("Проверяем...").show();
    return true;
  }
  $("span").text("Неправильно!")
      .show().fadeOut(1000);
  return false;
});
Откройте пример в новом окне и посмотрите исходный код

.change([fn])

Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие.
// установим обработчик события 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 );
});
По событию change для всех текстовых элементов ввода вызываем некую функцию, которая например будет проверять вводимые данные.
$("input[@type='text']").change( function() {
  // здесь проверяем ввод на валидность
});
В следующем примере по событию change, используем функцию, которая получает текст каждой выбранной опции и записывает этот текст в элемент div в виде строки. Далее используем change(), чтобы вызвать это событие.
$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
    str += $(this).text() + " ";
  });
  $("div").text(str);
}).change();
Откройте пример в новом окне и посмотрите исходный код