Ruby on Rails c нуля!

В этой статье мы разберемся с обработкой событий в jQuery.

Чтобы присоединить обработчик к событию необходимоо использовать функцию bind():

$(function(){
  $('a.link-style').bind('click', function(){
    alert("Welcome to RubyDev.ru!")
  });
});

В примере выше функция bind() связывает с событием click (одиночный клик) с анонимной функцией, которая вызывает фнутри себя функцию alert(). Функция с которой связано событие называется обработчиком события.

Функция — обработчик может принимать аргумент event — специальный объект который содержит информацию об окружении и времени происхождения события. Чаще всего необходимости в этом аргументе нету, но мы рассмотрим пример с его использованием:

function clickHandler(event) {
  var methods = []
  for(var m in event){
    if(typeof event[m] === 'function'){
      methods.push(m)
    }
  }
  alert(methods);
}

$(function(){
  $('a').bind('click', clickHandler);
});

Ниже приведен результат выполнения обработчика — список методов объекта event:

• isDefaultPrevented
• handler
• preventDefault
• stopPropagation
• stopImmediatePropagation
• isPropagationStopped
• isImmediatePropagationStopped

Думаю, из названия и так понятно что каждый из них делает, например stopPropagation останавливает обработку события.

Функция bind() может принимать не толькоо единичное событие и его обработчик, но и целое множество событий в виде хэша, где ключем является название события, а значением — обработчик:

$(function(){
  $('a').bind({
    click: function(){
      $(this).css('color',"red")
    },
    dblclick: function(){
      $(this).css('color','green')
    }
  });
});

Для того, чтобы отменить обработчики событий существует специальная функция unbind(). Если в unbind() не передавать аргументов, то функция удалит все обработчики для всех событий своего приемника. В  unbind() можно передавать имя события, тогда будут удалены только обработчики этого события. Ниже приведен пример работы:

var elem = $('a');
elem.unbind();//удаление всех обработчиков
elem.unbind('click');//удаление обработчиков click

Существует также функция one(), которая происходит от bind(). Отличие one() от bind() заключается в том, что one() объявляет одноразовый обработчик события, алгоритм ее работы пимерно такой: bind(handler(unbind)). При повторном событии обработчик события не срабатывает.

Также у bind() есть аналог — функция live(). Отличие live() от bind() заключается в том, что обработчик события объявленный через bind() не сработает для элементов, которые добавлены после загрузки DOM, то есть для элементов, которые через JavaScript добавляются на страницу (например через Ajax). Функция live() позволяет решить этот недостаток, после добавления новых элементов, которые соответствуют селектору, при объявлении обработчиков через live() обработчики будут доступны также для новых элементов. Для того, чтобы сбросить обработчики установленные через live() существует функция die() — аналог unbind() для live().

У функции live() имеется сестра — близняшка — функция delegate(). Разница между live() и delegate() заключается в том, что для delegate мы объявляем контекст, который ограничивает поиск элементов. C точки зрения производительности более выгодно использовать функцию delegate(). Для delegate() имеется функция удаления обработчика как die() для live() — функция undelegate().Когда контент статический, то правильным будет использование bind() или производных от нее функций, которые описаны ниже.

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

click() — функция устанавливает обработчик для события одиночного клика.

dblclick() — функция устанавлевает обработчик для события двойного клика.

focus() — функция устанавливает обработчик для события фокуса на объекте (фокус переключается клавишей Tab)

focusin() — функция аналогична функции focus с тем отличием что поддерживает обработку события фокуса на родительских элементах.

blur() — определяет обработчик событию потери фокуса.

focusout() — функция аналогична blur() с тем отличие что поддерживает обработку события потери фокуса родительского элемента.

hover() — функция позволяет назначить обработчики сразу двум событиям — наведению курсора на объект и перемещения курсора с объекта.

keydown() — устанавливает обработчик события нажания кнопки, событие относится к тому, объекту, который находится в фокусе.

keypress() — устанавливает обработчик события нажатия клавиши, отличие от keydown и keypress в том, что обрабатываются все клавиши, а не только первая нажатая.

keyup() — функция устанавливает обработчик для события отпуска кнопки мыши, то есть после нажания.

mousedown() — функция позволяет установить обработчик события нажатия левой клавиши мыши при наведенном на элемент курсоре.

mouseup() — функция позволяет установить обработчик события отпуска левой клавиши мыши при наведенном на элемент курсоре.

mouseenter() — функция позволяет установить обработчик наведения курсора на элемент.

mouseover() — функция аналогична mouseenter().

mouseleave() — функция позволяет установить обработчик события, когда курсор смещается с элемента.

mouseout() — функция аналогична функции mouseleave().

mousemove() — функция позволяет установить обработчик события перемещения курсора по элементу.

resize() — функция позволяет установить обработчик собития изменения размера для объекта window — окна браузера.

scroll() — функция позволяет установить обработчик для события прокручивания скроллбара.

select() — функция позволяет установить обработчик события выделения текста для <textarea> и <input type=»text»>

submit() — функция позволяет установить обработчик события отправки формы и может применяться только к элементам формы.

load() — функция позволяет установить обработчик события окончания загрузки страницы (построения дерева DOM).

ready() — функция аналогична load() с тем лишь отличием, что обработчик выполняется не сразу после построения дерева DOM, но сразу после загрузки всех картинок и т.д., то есть полной загрузки содержимого.

unload() — функция позволяет создать обработчик события, когда пользователь переходит на другую страницу.

error() — функция позволяет установить обработчик события ошибки загрузки како-го нибудь элемента — ссылки на файл, когда происходит ошибка при загрузке файл.

Здесь нужно остановиться и поработать с изучеными функция для получения практических навыков и большей запоминаемости материала. Давайте создадим в несколько способов обработчик события click для любой ссылки:

$(function(){
  $('a').bind('click',function(){
    alert('Click!');
    return false; //возвращаем false, чтобы не было перехода
  });
});

//пример аналогичен предыдущему, только более читабелен:
$(function(){
  $('a').click(function(){
    alert('Click!');
    return false;
  });
});

//используем live()
$(function(){
  $('a').live('click',function(){
    alert('Click!');
    return false
  });
});

//используем delegate(), но поставим ограничение - ссылки должны быть вложены в <div id="nav">:

$(function(){
  $('#nav').delegate('a', 'click',function(){
    alert('Click!');
    return false
  });
});

Следующая функция с которой нам нужно познакомиться — это toggle(). toggle() позволяет присоединить несколько обработчиков события click для определенного элемента. Обработчики срабатывают по очереди, по одному обработчику на каждое событие.  Пример:

$(function(){
  $('a').toggle(
    function(){ alert('First click' ); },
    function(){ alert('Second click'); },
    function(){ alert('Third click' ); }
  );
});

Следующие две функции с которыми нам нужно познакомиться — это функции trigger() и triggerHandler().

Функция trigger() позволяет вручную вызвать обработчик определенного события. Например, у нас имеется ссылка «hello» и ссылка «bye», при клике на ссылку «hello» должно появится приветствие, а при клике на ссылку «bye» мы должны сначала поздороваться, а затем попрощатся. Для того, чтобы не вовторять код для вывода приветственного сообщения мы и будем использовать trigger().

$(function(){
  var hello = $('a#hello')

  hello.click(function(){ alert("Hello!") });

  $('a#bye').click(
    function(){
      hello.trigger('click'); //выводим сообщение "Hello!"
      alert("Bye!"); //затем "Bye!"
    };
  );
});

triggerHandler() действует аналогично функции trigger(), но есть несколько значительных отличий:

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

2. triggerHandler() работает только с первым элементов из списка элементов страницы, что соответствуют селектору, в то время, как trigger() работает со всей коллекцией.

3. Если trigger() возвращает jQuery-объект, что позволяет строить цепочку вызова функций, то triggerHandler() возвращает то значение, что было возвращено из последнего выполненного обработчика события.

4. triggerHandler() не производит поиск обработчика события по дереву DOM, это значет, что если у выбранного события обработчик не определен, то triggerHandler() не будет следовать по ветви предком для поиска оного.

На этом все! В следующей статье мы рассмотрим работу с AJAX или со всякими интересными эффектами типа затухания и т.д.