Что быстрее, .on () или .click ()?

Question

Если у меня есть таблица со ссылками для удаления записи, какой лучший способ подключить событие click? Они одинаково оценивают под капотом?

$("#table").on("click", ".delete", function(){
   //do stuff
});

или

$("#table .delete").click(function(){
   //do stuff
});

Answer 1

Нет, они не.

То, как вы их используете ...

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

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

Прочитайте некоторые тесты с делегированием событий здесь ...

Тестирование производительности присоединения обработчиков событий ...

Answer 2

Это все равно что спрашивать, что быстрее int или string в C#.Каждый тип имеет свое использование ...
Дело не в том, что быстрее, а в том, что использовать, когда.

on позволяет вам прикреплять событие к динамически добавляемым элементам, а click - нет.

, если у вас нет «динамически добавляемых элементов», используйте click, в противном случае используйте on.

Answer 3

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

При этом вам нужно учитывать несколько вещей при выборе между этими двумя:

1. Насколько сложен ваш селектор? Если вы делаете $('#rootItem').on('click', '.foo .bar.baz .bum', function() { /* do stuff*/ }), это будет медленнее, чем $('#rootItem').on('click', '.foo', function() { /* do stuff*/ }), потому что селектор более сложен в первом случае. В этом сценарии может иметь больше смысла платить цену за вложение и использовать click(...), чтобы сохранить стоимость выполнения каждого клика в пределах #rootItem во время выполнения, чтобы проверить, соответствует ли он селектору '.foo .bar.baz .bum'. Простой одноклассный селектор, как у вас ('.delete'), будет работать очень хорошо.
2. Будет ли содержимое динамически меняться? Если это так, вы будете отвечать за вызов click(...) для каждого динамически добавляемого элемента. Функция on(...) может справиться с этим немного лучше, если ваш «внешний» селектор (в данном случае '#table') не указывает на элементы, которые будут динамически добавляться. Замените '#table' на '.table' и динамически добавьте новую таблицу с классом table, и к вновь добавленной таблице не будут подключены обработчики событий из вашего начального вызова on(...).

Answer 4

click быстрее, чем on, потому что он присоединяет событие непосредственно к элементу, где on присоединяет событие к #table и ищет элемент .delete для запуска события, поэтому есть некоторый код выполнение до запуска события click.

Разница незначительна, хотя вы не увидите никакой разницы.

Если вы используете on, то достаточно одного обработчика событий, чтобы позаботиться о любом количестве .delete элементов внутри #table, где click будет прикреплено к каждому из .delete элементов, поэтому on лучше с точки зрения использования памяти.