jQuery каждый () против ()

0

В чем разница между этими параметрами?

1:

$('[data-focus-link]').each( function() {
  var $this = $(this);
  var $focus_id = $this.attr('data-focus-link');

  $this.click( function() {
    $('#' + $focus_id).focus();
  });

});

2:

$(document).on('click', '[data-focus-link]', function() {
  var $this = $(this);
  var $focus_id = $this.attr('data-focus-link');

  $('#' + $focus_id).focus();

});

Мне все равно, что использовать?

  • 0
    Просто используйте $(document).on ? Вы должны заботиться, что использовать?
Теги:

3 ответа

3
Лучший ответ

Использование $(document).on('click', '[data-focus-link]', function() { }) лучше по производительности, более заметно, если у вас есть много элементов, которые вы хотите прослушать для события "click", Он создает только 1 прослушиватель событий в document и делегирует захваченное событие элементу, указанному селектором (например, [data-focus-link]).

$('[data-focus-link]').each(function() {}) подход создавал бы n # прослушивателей событий, каждый из которых указывал бы копию анонимной функции, которую вы определили:

function() {
    $('#' + $focus_id).focus();
}

Пройдите тест и убедитесь сами, попробуйте 10, 100, 1000, 10000 элементов, и вы увидите резкое падение производительности с помощью .each().

0

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

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

0

Разница в том, что в первом случае вы повторяете элементы, которые уже есть в DOM и без какого-либо взаимодействия с пользователем.

Во втором случае вы делаете то же самое, но в событии клика, и вы будете выполнять итерацию через элементы, включая динамически добавленные

Ещё вопросы

Сообщество Overcoder
Наверх
Меню