jQuery API: Events –события. Часть 2.

Повторюсь, что в документации к библиотеке jQuery тема событий и их обработки занимает значительное место. И во второй части мы будем знакомиться с хэлперами. Используя их, Вы сможете как вызывать определенные события, так и связывать с ними некоторые действия…

Interaction Helpers:

hover(over, out)

возвращает: jQuery
Симулирует hovering – отслеживание входа указателя мыши в пределы объекта и выхода за его пределы. Всякий раз, когда указатель мыши оказывается поверх объекта, вызывается функция, переданная в качестве первого аргумента. Аналогично, когда указатель мыши выходит за пределы объекта – вызывается функция, которая является вторым аргументом.

Например, чтобы добавить специальный стиль для ячейки таблицы над которой находится указатель мыши, можно сделать так:

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

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

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  },
  function () {
    $(this).find("span:last").remove();
  }
);

Откройте пример в отдельном окне и посмотрите исходный код.

toggle(fn, fn1)

возвращает: jQuery
Переключается между двумя функциями, которые по очереди вызываются каждым следующим кликом. Каждый раз, когда клик совершен на выбранном элементе, срабатывает первая функция. Если на том же элементе совершен еще один клик – срабатывает вторая функция. Каждый следующий клик продолжает переключение между этими двумя функциями. Можно использовать unbind(«click»), чтобы отменить действие toggle().

Чтобы добавить специальный стиль для ячейки таблицы по которой был совершен клик, можно сделать так:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

В следующем примере мы применяем и следующим кликом отменяем стили для каждого элемента списка.

$("li").toggle(
  function () {
    $(this).css("list-style-type", "disc")
      .css("color", "blue");
  },
  function () {
    $(this).css({"list-style-type":"", "color":""});
  }
);

Откройте пример в отдельном окне и посмотрите исходный код.

Event Helpers:

blur()

возвращает: jQuery
Вызывает событие blur для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием blur и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием blur. Событие blur обычно вызывается, когда элемент теряет фокус через действие указывающего устройства или клавиши Tab.

Вызываем событие blur для всех параграфов:

$("p").blur();

blur(fn)

возвращает: jQuery
Связывает функцию с событием blur для всех элементов набора.

Чтобы выводить в alert сообщение «Hello World!» каждый раз, когда для любого параграфа наступает событие blur, надо сделать следующее:

$("p").blur( function () { alert("Hello World!"); } );

change()

возвращает: jQuery
Вызывает событие change для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим событием change и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием change. Событие change обычно вызывается, когда элемент управления теряет фокус и его значение было изменено с момента получения им фокуса.

change(fn)

возвращает: jQuery
Связывает функцию с событием change для всех элементов набора.

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

$("input:text").change( function() {
  // здесь проверяем ввод на валидность
});

В следующем примере по событию change, используем функцию, которая получает текст каждой выбранной опции и записывает этот текст в элемент div в виде строки. Далее используем change(), чтобы вызвать это событие.

$("select").change(function () {
  var str = "";
  $("select option:selected").each(function () {
    str += $(this).text() + " ";
  });
  $("div").text(str);
}).change();

Откройте пример в отдельном окне и посмотрите исходный код.

click()

возвращает: jQuery
Вызывает событие click для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим обытием.

Чтобы вызвать событие click для всех параграфов на странице:

$("p").click();

click(fn)

возвращает: jQuery
Связывает функцию с событием click для всех элементов набора. Событие click наступает, когда кнопка указывающего устройства (например мышь) кликнута на элементе. Клик определяется как mousedown + mouseup в некотором месте экрана.

Чтобы скрыть параграфы на странице, на них необходимо кликнуть. Здесь hover() используется просто для эффекта.

$("p").click(function () {
  $(this).slideUp();
});
$("p").hover(function () {
  $(this).addClass("hilite");
}, function () {
  $(this).removeClass("hilite");
});

Откройте пример в отдельном окне и посмотрите исходный код.

dblclick()

возвращает: jQuery
Вызывает событие dblclick для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим событием dblclick и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием dblclick.

dblclick(fn)

возвращает: jQuery
Связывает функцию с событием dblclick для каждого элемента набора. Событие dblclick обычно вызывается, когда кнопка указывающего устройства дважды быстро кликнута на элементе.

Чтобы выводить в alert сообщение «Hello World!» каждый раз, когда для любого параграфа наступает событие dblclick, надо сделать следующее:

$("p").dblclick( function () { alert("Hello World!"); });

В следующем примере двойной клик по элементу div, переключает его цвет.

var divdbl = $("div:first");
divdbl.dblclick(function () {
  divdbl.toggleClass('dbl');
});

Откройте пример в отдельном окне и посмотрите исходный код.

error()

возвращает: jQuery
Вызывает событие error для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим событием error и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием error. Событие error обычно вызывается, когда элемент теряет фокус через действие указывающего устройства или клавиши Tab.

error(fn)

возвращает: jQuery
Связывает функцию с событием error для каждого элемента набора.
Для события error нет общих стандартов. В большинстве браузеров, событие error объекта window вызывается, когда на странице обнаружена ошибка JavaScript. Для объекта image событие error вызывается при некорректном содержимом атрибута src – например, несуществующий файл.

Если событие произошло в объекте window, обработчик события передает три параметра:

• сообщение, описывающее событие («varName is not defined», «missing operator in expression», и т.д.);
• полный URL документа, который содержит ошибку;
• номер строки, в которой произошла ошибка;

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

Чтобы сохранить лог ошибок 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;
});

Чтобы скрыть иконку «broken image» от пользователей IE, можно попытаться сделать так:

$("img").error(function(){
  $(this).hide();
});

focus()

возвращает: jQuery
Вызывает событие focus для каждого элемента набора. В этом случае будут вызваны все функции, связанные с этим событием focus.

Чтобы при загрузке страницы сразу передать фокус элементу с идентификатором ‘login’, сделайте следующее:

$(document).ready(function(){
  $("#login").focus();
});

focus(fn)

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

Чтобы запретить пользователю писать что-либо в поле ввода, сделайте так:

$("input[@type=text]").focus(function(){
  $(this).blur();
});

В этом примере как только элемент input получает фокус, отображается следующий сразу за ним элемент span и в течении одной секунды «затухает».

$("input").focus(function () {
  $(this).next("span").css('display','inline')
    .fadeOut(1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

keydown()

возвращает: jQuery
Вызывает событие keydown для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием keydown и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием keydown.

keydown(fn)

возвращает: jQuery
Связывает функцию с событием keydown для каждого элемента набора. Событие keydown обычно вызывается, когда на клавиатуре нажата какая-либо клавиша.

Чтобы выполнять различные действия в зависимости от того, какая клавиша нажата на клавиатуре, попробуйте сделать так:

$(window).keydown(function(event){
  switch (event.keyCode) {
    // ...
    // разные клавиши выполняют разные сценарии
    // разные браузеры могут предоставлять разные коды
    // чтобы узнать больше смотрите тут
    // http://unixpapa.com/js/key.html
    // ...
  }
});

keypress()

возвращает: jQuery
Вызывает событие keypress для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием keypress и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием keypress. Событие keypress обычно вызывается, когда на клавиатуре была нажата какая-либо клавиша.

keypress(fn)

возвращает: jQuery
Связывает функцию с событием keypress для каждого элемента набора. Событие 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);
});

Откройте пример в отдельном окне и посмотрите исходный код.

keyup()

возвращает: jQuery
Вызывает событие keyup для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием keyup и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием keyup.

keyup(fn)

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

Небольшой пример демонстрирует, как выполнить какое-либо действие в тот момент, когда отпущена клавиша escape:

$(document).keyup(function(event){
  if (event.keyCode == 27) {
    alert('escaped!');
  }
});

load(fn)

возвращает: jQuery
Связывает функцию с событием load для каждого элемента набора. Будучи связанным с элементом window, это событие вызывается только тогда, когда агент пользователя завершит загрузку всего содержимого документа (фреймы, объекты, графику). Для элементов это вызывается, когда целевой элемент и все его содержимое полностью загружено.
Необходимо помнить, что load будет работать только в том случае, если он определен перед элементом, полной загрузки которого мы ожидаем. Если же его определить после такого элемента – ничего не произойдет.
В этом примере некоторый код будет выполнен только после полной загрузки страницы, включая и графику.

$(window).load(function () {
  // выполняем некоторый код
});

mousedown(fn)

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

В этом примере добавляется текст сообщений, когда происходят события mouseup и mousedown на элементе p.

$("p").mouseup(function(){
  $(this).append('<span style="color: #ff0000">Up!</span>');
}).mousedown(function(){
  $(this).append('<span style="color: #0000ff">Down!</span>');
});

Откройте пример в отдельном окне и посмотрите исходный код.

mousemove(fn)

возвращает: jQuery
Связывает функцию с событием 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)

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

В этом примере показываются сообщения, когда происходят события 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").bind("mouseenter",function(){
  $("p:first",this).text("мышь пришла");
}).bind("mouseleave",function(){
  $("p:first",this).text("мышь ушла");
  $("p:last",this).text(++n);
});

Откройте пример в отдельном окне и посмотрите исходный код.

mouseover(fn)

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

var i = 0;
$("div.overout").mouseover(function(){
  $("p:first",this).text("мышь over");
  $("p:last",this).text(++i);
}).mouseout(function(){
  $("p:first",this).text("мышь out");
});
var n = 0;
$("div.enterleave").bind("mouseenter",function(){
  $("p:first",this).text("мышь пришла");
  $("p:last",this).text(++n);
}).bind("mouseleave",function(){
  $("p:first",this).text("мышь ушла");
});

Откройте пример в отдельном окне и посмотрите исходный код.

mouseup(fn)

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

В этом примере добавляется текст сообщений, когда происходят события mouseup и mousedown на элементе p.

$("p").mouseup(function(){
  $(this).append('<span style="color: #ff0000">Up!</span>');
}).mousedown(function(){
  $(this).append('<span style="color: #0000ff">Down!</span>');
});

Откройте пример в отдельном окне и посмотрите исходный код.

resize(fn)

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

Чтобы сделать изменение размеров окна головной болью, попробуйте сделать так:

$(window).resize(function(){
  alert("Stop it!");
});

scroll(fn)

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

Что бы делать что-нибудь, отслеживая прокрутку области просмотра документа:

$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$("p").clone().appendTo(document.body);
$(window).scroll(function () {
  $("span").css("display", "inline").fadeOut("slow");
});

Откройте пример в отдельном окне и посмотрите исходный код.

select()

возвращает: jQuery
Вызывает событие select для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием select и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием select.
Не стоит путать событие «select» с событием «change», которое вызывается, когда HTML-элемент select используется для выбора какой(их)-либо опций.

Чтобы вызвать событие select для всех элементов input, попробуйте сделать так:

$("input").select();

select(fn)

возвращает: jQuery
Связывает функцию с событием select для каждого элемента набора. Событие select обычно вызывается, когда пользователь выделяет какой-либо текст в текстовом поле, например input и textarea.

Чтобы выполнить какие-либо действия, когда выделяется текст в элементах ввода текста:

$(document).select( function () {
  $("div").text("Что-то было выделено!")
  .show().fadeOut(1000);
});

Откройте пример в отдельном окне и посмотрите исходный код.

submit()

возвращает: jQuery
Вызывает событие submit для всех элементов набора. В этом случае будут вызваны все функции, связанные с этим событием submit и также вызовет действие браузера по умолчанию для этого события. Поведение браузера по умолчанию можно предупредить, возвращая false из одной или нескольких функций, связанных с этим событием submit.

Чтобы вызвать событие submit для первой формы на странице, надо сделать так:

$("form:first").submit();

submit(fn)

возвращает: jQuery
Связывает функцию с событием submit для каждого элемента набора. Событие 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;
});

Откройте пример в отдельном окне и посмотрите исходный код.

unload(fn)

возвращает: jQuery
Связывает функцию с событием unload для каждого элемента набора.

Чтобы попрощаться с посетителем, выведя сообщение в alert в то время когда страница закрывается:

$(window).unload( function () { alert("Bye now!"); } );

На этом пожалуй все. Ну, не совсем конечно. Впереди нас ждет еще интереснейшая тема – эффекты библиотеки jQuery.