Пространство имен

Как вы уже узнали, когда мы хотим создать/удалить свой обработчик событий, мы пишем следующий код:

// создаем свой обработчик $('.class').on('click', function(){

// что-то делаем

});

// удаляем все обработчики $('.class').unbind();

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

// создаём обработчик $('.class').on('click.namespace', function(){

// что-то делаем

});

// вызываем обработчик $('.class').trigger('click.namespace');

// вызываем все обработчики без пространства имён $('.class').trigger('click!');

// удаляем все обработчики click в данном пространстве имён $('.class').unbind('click.namespace');

Еще примерчик, вешаем обработчик, который выводит текст в консоль:

$('.class').on('click.namespace', function(){ console.log('bang');

}); // вызываем событие, наш обработчик сработает

$('.class').trigger('click.namespace'); // тоже работает $('.class').trigger('click');

// событие из другого пространства имён, наш обработчик не будет вызван $('.class').trigger('click.other');

47

Также, есть поддержка нескольких пространств имён:

$('.class').on('click.a.b', function(){

// для пространства имён a и b

});

// вызываем обработчик из пространства a $('.class').trigger('click.a');

// отменяем обработчик click для пространства b $('.class').unbind('click.b');

Можно одним махом удалить все обработчики с определенного пространства имен:

// обработчик клика $('.class').on('click.namespace', function(){}); // обработчик фокус $('.class').on('blur.namespace', function(){});

// передумали, и все отменили $('.class').unbind('.namespace');

Официальная документация скудна на этот счёт, и я надеюсь мой пример поможет лучше разобраться в данном вопросе (events.namespace.html).

«Живые» события

Я тут немного забегу вперёд, так что если чего стало непонятно, отложите данный раздел «на потом».

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

«У нас есть HTML страница, на которой все внутренние ссылки будут подгружаться AJAX’ом, данное утверждение справедливо и для подгружаемого HTML’а тоже»

48

Первое условие решается просто:

$('a[href^=\\/]').on('click', function() { var url = $(this).attr('href'); $('body').load(url + ' body > *'); return false;

});

Для наглядности, условимся, что внутренние ссылки содержат относительные пути от корня сайта.

Со вторым условием чуть-чуть посложнее ситуация, но тоже вполне решаема:

$('body').on('click', 'a[href^=\\/]', function() { var url = $(this).attr('href'); $('body').load(url + ' body > *');

return false;

});

Отличий не так уж и много, проясню происходящее:

—первым делом на элемент body будет повешен обработчик события click

—данный обработчик будет срабатывать только в том случае, когда событие будет относится к элементу a

Работа данной схемы базируется на «всплытии» событий, так что используя метод event.stopPropagation() вы сможете предотвратить выполнение «живых» обработчиков

Лирическое отступление к истории: жил да был когда-то плагин для jQuery, назывался live, позволял он вешать обработчики на элементы DOM дерева которых ещё нет (подгружаемые AJAX’ом или ещё как), а потом он умер его внесли в само ядро. Метод live() к тому времени работал лишь с document. Затем появился метод delegate() который научился вешать обработчик на произвольный элемент, а затем и он был поглощён методом on(). Так что не пугайтесь сильно, если встретите старый, адаптировать под новые версии jQuery его будет не так уж и сложно (ну я на это надеюсь)

49

Оптимизация

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

Случай первый, банальный – представьте себе таблицу на тысячу строк да десяток столбцов, а теперь попытайтесь подсчитать, сколько памяти скушают обработчики события click для каждой ячейки? Вот-вот, стоит это переписать в один обработчик:

$('table').on('click', 'td', function() { /* ... */ }

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

$('body').on('click', '*', function() {

console.info("Click on "+this.tagName);

});

Пример работы данного «надуманного» варианта можно посмотреть на странице events.optimization.html

Touch события

Смартфоны с большим сенсорным экраном — это уже норма жизни, и любому webразработчику рано или поздно потребуется разрабатывать интерфейсы с поддержкой «touch» событий. На этот случай в JavaScript'е предусмотрены следующие события:

touchstart — событие схоже с mousedown, происходит при касании пальцем экрана

touchend — убираем палец с экрана, ака mouseup

touchmove — водим пальцем по экрану — mousemove

touchcancel — странное событие, отмена touch до того, как палец был убран

О том как с ними работать, можно подчерпнуть из статьи Touching and Gesturing on iPhone, Android, and More (хоть рассказ там и о Dojo Toolkit). Для обработки touch событий с использованием jQuery лучше всего использовать jQuery Mobile.

50