В документации к библиотеке jQuery тема событий и их обработки занимает значительное место. Поэтому мы разделим ее на две части и в сегодняшней статье поближе познакомимся с «основными» (условно конечно) методами – ready, bind, one, trigger и triggerHandler, unbind. А уже во второй части познакомимся с хэлперами – эдакими помощниками, используя которых, Вы сможете как вызывать определенные события, так и связывать с ними некоторые действия…

Page Load:

ready(fn)

возвращает: jQuery
Назначает функции, которые будут выполняться всякий раз, когда объектная модель документа (DOM) готова к использованию. Это наверное самая важная функция, включенная в раздел «События», поскольку она может улучшить время реакции веб-приложений, и хорошая альтернатива использованию события window.onload, поскольку при использовании этого метода, Ваши функции будут вызваны уже в тот момент, когда объектная модель документа (DOM) готова к работе. Здесь не нужно ожидать, когда страница будет полностью загружена.

Аргумент, передаваемый обработчику события, является ссылкой на функцию jQuery. Можно использовать jQuery или $ без риска возникновения коллизий в пространстве имен. Однако необходимо убедиться в том, что не имеет обработчика события onload, в противном случае $(document).ready() может не выполниться.

На странице можно иметь сколь угодно много $(document).ready событий. В этом случае функции, связанные с ними, будут выполняться в порядке их следования.

В этом примере мы покажем сообщение о том, что DOM загружена и готова к работе.

$(document).ready(function(){
  $("p:first")
    .text("DOM загружена и готова к работе!");
});
// еще раз тоже самое
jQuery(document).ready(function(){
  jQuery("p:last")
    .text("Объектная модель документа готова!");
});

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

Event Handling:

bind(type, [data], fn)

возвращает: jQuery
Связывает обработчик с одним или более событиями (например click) для каждого элемента набора. Может также связывать пользовательские события. Возможные события: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error. Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и «всплывание» события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false.

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

$("p").bind("click", function(){
  alert( $(this).text() );
});

В случае, если это невозможно, следует передавать дополнительные данные во втором параметре [data] (см. пример).

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler);

Чтобы отменить действие по умолчанию и предотвратить «всплывание», возвращаем false:

$("form").bind("submit", function() { return false; });

Чтобы отменить только действие по умолчанию используется метод preventDefault.

$("form").bind("submit", function(event){
  event.preventDefault();
});

Для предотвращения «всплывания» события используется метод stopPropagation.

$("form").bind("submit", function(event){
  event.stopPropagation();
});

Также можно связать некие пользовательские события.

$("p").bind("myCustomEvent", function(e,myName,myValue){
  $(this).text(myName + ", hi there!");
  $("span").stop().css("opacity", 1)
    .text("myName = " + myName)
    .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent", [ "John" ]);
});

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

В следующем примере демонстрируется обработка событий click и double-click на параграфе.

$("p").bind("click", function(e){
  var str = "( " + e.pageX + ", " + e.pageY + " )";
  $("span").text("Кликнуто! " + str);
});
$("p").bind("dblclick", function(){
  $("span").text("Двойной клик сделан на "+this.tagName);
});
$("p").bind("mouseenter mouseleave", function(e){
  $(this).toggleClass("over");
});

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

Примите во внимание, что пример демонстрируется во фрейме, соответственно и координаты вычисляются относительно фрейма.

one(type, [data], fn)

возвращает: jQuery
Связывает обработчик с одним или более событиями, которые будут выполнены только один раз, для каждого элемента в наборе. Обработчик исполняется только один раз для каждого элемента. В остальном действуют те же правила, описанные при применении bind(). Обработчик события принимает объект событие, что делает возможным предотвращение поведения по умолчанию. Чтобы предотвратить и поведение по умолчанию и «всплывание» события (т.е. передачу события от одного элемента другому), обработчик должен возвращать false.

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

$("p").one("click", function(){
  alert( $(this).text() );
});

В случае, если это невозможно, следует передавать дополнительные данные во втором параметре [data]. В следующем примере связываем «одноразовый» клик с каждым элементом div.

var n = 0;
$("div").one("click", function(){
  var index = $("div").index(this);
  $(this).css({ borderStyle:"inset", cursor:"auto" });
  $("p").text("DIV с индексом #" + index + " кликнут." +
  "  Всего " + ++n + " кликов.");
});

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

trigger(type, [data])

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

Чтобы отправить первую форму без использования submit(), надо проделать следующее:

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

Чтобы передать произвольные данные событию:

$("p").click( function (event, a, b) {
  // при обычном клике по параграфу,
  // a и b остаются неопределенными
  // при клике вызванном через trigger(),
  // a ссылается на "foo", b ссылается на "bar".
} ).trigger("click", ["foo", "bar"]);

В этом примере будет яснее. Следующий код выводит «Hello World!» в alert.

$("p").bind("myEvent", function (event,mess1,mess2) {
  alert(mess1 + ' ' + mess2);
});
$("p").trigger("myEvent", ["Hello","World!"]);

Также можно вызывать пользовательские события, зарегистрированные в bind. В этом примере клик по button #2 вызывает клик по button #1. Но не наоборот.

$("button:first").click(function () {
  update($("span:first"));
});
$("button:last").click(function () {
  $("button:first").trigger('click');
  update($("span:last"));
});
function update(j) {
  var n = parseInt(j.text(), 0);
  j.text(n + 1);
}

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

triggerHandler(type, [data])

возвращает: jQuery
Это особенный метод вызова всех связанных с элементом обработчиков событий БЕЗ выполнения браузером действий по умолчанию. Событие вызывается только для первого элемента, включенного в набор. Если набор элементов пуст, этот метод вернет ‘undefined’.

Испытайте следующий пример. Если Вы вызываете 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);
});

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

unbind([type], [data])

возвращает: jQuery
Это метод – противоположность bind, он удаляет все события связанные с элементом для каждого элемента набора. Можно также удалить пользовательские события, зарегистрированные в bind(). Если передан аргумент type – удалены будут все события этого типа.

Посмотрите внимательнее следующий пример. Нажатие на кнопку Bind, делает цветную кнопку «рабочей». Если же нажать кнопку Unbind, цветная кнопка больше не работает…

function aClick() {
  $("div").show().fadeOut("slow");
}
$("#bind").click(function () {
  $("#theone").click(aClick).text("Can Click!");
});
$("#unbind").click(function () {
  $("#theone").unbind('click', aClick)
    .text("Does nothing...");
});

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

Ну, для первой части достаточно, а во второй, как и обещал, будем знакомиться с хэлперами…

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal