Объясните коротко, по делу что же лучше/производительнее/удобнее и в каких ситуациях?

Question

[terehof]

Здравствуйте.
Что же лучше/производительнее/удобнее и в каких ситуациях?

.on('click'..)  
.live('click',...) 
.bind('click', ...) 
.click(...)

Спасибо)

Answer 1

[Алексей Николаев]

live отметаем сразу, т.к. он уже не только deprecated, но и deleted. С bind и click все интереснее - внутри (в коде jquery) они ссылаются на on, и возможно даже будут удалены в будущем. Отличие функциональности click в том, что он может возвращать уже привязанное событие (аналогично trigger), если оное уже есть. Например, объявление click выглядит как-то так (не скажу за все версии):

function (data, fn) {
    return arguments.length > 0 ? this.on(name, null, data, fn) : this.trigger(name);
}

Также click не может делегировать события, т.е. вы не сможете сделать так, чтобы событие было актуально не только для всех элементов a, которые уже есть, но и для тех, что сгенерируются любым способом в будущем (собственно, это позволяют live и on, первый из которых имеет статус deleted и недопустим к использованию).

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

Как-то так. Прошу извинить если немного напутал терминологию.

UPD. live технически также ссылался на on, но, хотя в отличие от bind и прочих позволял отслеживать появление новых элементов, имел много недостатков - тут можно много интересного прочесть. Возможно, поэтому его и удалили.

Comments

[Alex]

Получается выбор таков:
- если нет ajax или динамически создаваемых элементов то "click"
- если есть - то "on"
Так?

[Алексей Николаев]

Alex если нет ajax и дин. элементов вы также вполне можете использовать on, на ваш выбор. Просто click можно еще и без параметров вызывать, т.е. как бы "кликнуть" по элементу. Как обертка он лишь несколько упрощает синтаксис и делает код чуть нагляднее и, иногда, короче.

Лично я почти всегда использую on, т.к. практически никогда не возникает потребности в обратном.

Answer 2

[Сергей Протько]

мне казалось что все что не .on помечено как deprecated...

В любом случае:
- .on - универсальный метод объеденяющий все ниже перечисленные. Всегда старайтесь использовать его.

- .live - вешает листенер на document и проверяет источник события. Гуглить "Всплытие событий". Был еще .delegate, который делал ровно то же самое но вы сами указывали ноду на которую вешается обработчик. А теперь вопрос, что будет быстрее? Вешать обработчик напрямую на элемент или на его родителя и проверять с какого элемента этот ивент всплыл? Будет ли разница по глубине DOM дерева? Если мы дошли что чем ближе обработчик висит к целевой ноде, тем быстрее, почему вообще нужно использовать делегирование событий? Помимо упрощения работы (если DOM поменялся обработчики не нужно перерегистрировать так как контейнер не менялся и все еще хранит листенер) есть еще такой параметр как количество листенеров. Если у вас табличка аля эксель, проще повесить один листенер на контейнер чем много-тысяч на каждую ячейку.

- .bind - просто вешает событие на элемент.

- .click - алиас для .bind('click').

Answer 3

[Владимир Проскурин]

Добавлю к вышесказанному. on может выполнять то, что выполняют остальные функции.
обычный клик мышью

$el.click(function(e) { })     ==   $el.on('click', function(e) { });
$el.bind('click', function(e) { })     ==   $el.on('click', function(e) { });

множественное событие.

$el.bind('keyup keypress blur change', function(e) { })     ==   $el.on('keyup keypress blur change', function(e) { });

live событие. live используется тогда, когда нужно назначить событие на элемент, которого еще не существует, или он будет удаляться и потом опять создаваться.

jQuery('.el').live('click', function(e) { })  ==  jQuery(document).on('click', '.el', function(e) { });

Answer 4

[Nikolay Talanov]

Давно приучил себя к следующей структуре:

$(document).on("%eventType1% %eventType2% %eventTypeN%", "%classSelector1%, %classSelectorN", function() {
  //code
});
// ну и соответственно исключения для window вида $(window).on("resize", function(){});

Про всякие микрооптимизации ради невызова 1-2 функций забудьте, в любом случае все эти операции под капотом слишком незначительны в сравнении с прожорливостью манипуляций с самим DOM'ом.
Лучше абсолютно всегда делать все через делегирование ивентов, чем один раз забыть и сидеть потом час ломать себе мозг "а почему не работает" (с динамически добавленными элементами).