.delegate() vs .on()

Я использую jQuery в своем веб-приложении. Я использовал .bind(), но я вижу, что он немного медленный, поэтому, читая документацию, я читал о .on() и .delegate(). Я понимаю, как работает .delegate(), но я не понимаю, в чем разница между ним и .on() или что лучше в каких сценариях.

Также я использую jQuery 1.6, поэтому я хотел бы знать, стоит ли мне подготовить мой script для jQuery 1.7, поставив условие, подобное следующему:

if(typeof $(selector).on == 'function'){
    /* use .on() */
}else{
    /* use .delegate() */
}

Это хорошая идея (подготовиться к .on()) или это просто ищет неприятностей ни для чего?

Пожалуйста, помогите мне получить четкое представление об этих методах.

Ответы

Ответ 1

Синтаксис .on() - это новый синтаксис, используемый в версии 1.7, и он предназначен для замены .bind(), .delegate() и .live().

Подробнее здесь → http://blog.jquery.com/2011/11/03/jquery-1-7-released/

API новых событий:.on() и .off()

Новые API.on() и .off() объединяют все способы подключения событий к документу в jQuery - и theyre короче, чтобы напечатать!

  $(elements).on( events [, selector] [, data] , handler );
  $(elements).off( [ events ] [, selector] [, handler] );

Когда предусмотрен селектор,.on() аналогичен .delegate() в этом он прикрепляет делегированный обработчик событий, отфильтрованный селектором. когда селектор опущен или нуль, вызов похож на .bind(). Есть один неоднозначный случай: если аргумент данных является строкой, вы должны предоставить либо селекторную строку, либо значение null, чтобы данные не ошибались как селектор. Передайте объект для данных, и вам никогда не придется беспокоиться о специальные случаи.

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

Ответ 2

Недавно я ответил на связанный вопрос по этой теме.

Важная часть:

Новая функция on docs используется для замены существующих отдельных методов привязки событий:

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

Делегат:

$(selector).delegate(subselector, events, data, handler);
$(selector).on(events, subselector, data, handler);

Источник:

delegate: function( selector, types, data, fn ) {
  return this.on( types, selector, data, fn );
}

TL;DR

Если вам нужна обратная совместимость, просто продолжайте использовать .delegate() docs, если ваш код опирается на более новые Функции jQuery, не стесняйтесь использовать on.

Ответ 3

Из API:

"Начиная с jQuery 1.7,.delegate() был заменен методом .on().

"Начиная с jQuery 1.7, метод .on() предоставляет всю функциональность, необходимую для прикрепления обработчиков событий."

Ответ 4

Рассмотрите возможность использования find() вместо делегатов событий. Посмотрите на этот тест производительности: http://jsperf.com/jquery-event-delegation/85

Вместо

$("#mydomid").on("click", ".somechildclass", delegate);

использование

$("#mydomid").find(".somechildclass").on("click", delegate);

Ответ 5

если вы пройдете через jQuery Api, вы обнаружите, что оба одинаковы. Подробнее

Например, следующий .delegate() код:

$( "table" ). delegate ( "td", "click", function() {
$ (Это).toggleClass( "выбрано" ); });

эквивалентен следующему коду, написанному с использованием .on():

$( "table" ). on ("click", "td", function() {
$ (Это).toggleClass( "выбрано" ); });